有没有办法在不同的<select>标签之间共享<option>标签?我有很多选择,所有的选择都有相同的选项。因为我不想用太多的重复来填充DOM,所以我改变了使用一个输入和一个数据列表来共享选项,但是这两个都有事件的问题(只有在没有焦点的时候才会触发一个更改事件,或者客户端按下回车键),并且还允许客户端写任何他想要的东西,这真的不适合我的情况。
<select>
<option>
pod7payv1#
我不认为你可以用直接的HTML做到这一点。您可以使用JavaScript来填充所有SELECT标记。OPTION标记仍然会在DOM中出现多次,但至少您不会从服务器下载它们。
2w3rbyxf2#
一个老问题,但仍然值得回答。在我的情况下,我有一个可能有数百行数据的表,一个选择元素可能有数百个选项。页面加载时间变得太长。我的解决方案是创建1个选择元素,当该元素获得焦点时,该元素被放置在相关元素上,并且焦点然后被移动到选择元素。结果是内存占用被减少到仅选择的一个示例,并且仅一次迭代来填充它。缺点是需要两次用户交互来展开选择,一个用于聚焦,另一个用于扩展。How to automatically expand html select element in javascript到ExpandSelect的链接现在已经失效。你可以在这里找到它https://gist.github.com/adamcoulombe/5390270,但它看起来确实很冗长。
qmb5sa223#
正如zmbq所说,似乎没有办法在多个<select> DOM元素中重用<option> DOM元素。但是你可以减轻你的DOM,当<select>打开时,通过动态地对<option>元素收费。你当然可以手动完成,但是也有现有的js库做这项工作,如select2。
wkftcu5l4#
一种可能的替代方案是使用HTML list Attribute来标识单个/多个元素的预定义选项列表以建议用户。要实现此目标,您可以将select替换为input,并将其链接到page中包含的共享数据列表:
<input id="replaced_select_1" list="browsers"> <input id="replaced_select_2" list="browsers"> <input id="replaced_select_3" list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
4条答案
按热度按时间pod7payv1#
我不认为你可以用直接的HTML做到这一点。
您可以使用JavaScript来填充所有SELECT标记。OPTION标记仍然会在DOM中出现多次,但至少您不会从服务器下载它们。
2w3rbyxf2#
一个老问题,但仍然值得回答。在我的情况下,我有一个可能有数百行数据的表,一个选择元素可能有数百个选项。页面加载时间变得太长。我的解决方案是创建1个选择元素,当该元素获得焦点时,该元素被放置在相关元素上,并且焦点然后被移动到选择元素。结果是内存占用被减少到仅选择的一个示例,并且仅一次迭代来填充它。缺点是需要两次用户交互来展开选择,一个用于聚焦,另一个用于扩展。How to automatically expand html select element in javascript到ExpandSelect的链接现在已经失效。你可以在这里找到它https://gist.github.com/adamcoulombe/5390270,但它看起来确实很冗长。
qmb5sa223#
正如zmbq所说,似乎没有办法在多个
<select>
DOM元素中重用<option>
DOM元素。但是你可以减轻你的DOM,当
<select>
打开时,通过动态地对<option>
元素收费。你当然可以手动完成,但是也有现有的js库做这项工作,如select2。wkftcu5l4#
一种可能的替代方案是使用HTML list Attribute来标识单个/多个元素的预定义选项列表以建议用户。
要实现此目标,您可以将select替换为input,并将其链接到page中包含的共享数据列表: