排序下拉列表 [英] Sort dropdown list
问题描述
我正在尝试在html中对下拉列表（选择器）进行排序。
I am trying to sort a dropdownlist (selector) in html.
我有两个列表，一个预选然后应该用于定义内容secont列表。
I have two lists, a pre-selection which then should be used to define the content of the secont list.
一个简短的代码示例：
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table width=100% border="0">
<tr>
<td> </td>
<td>Product</td>
<td><select name="product" id="product" width="300" style="width: 300px">
<option></option>
<option id="TLX">TLX</option>
<option id="FLX">FLX</option>
<option id="MLX">MLX</option>
</select></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Power</td>
<td><select name="power" id="power" width="300" style="width: 300px">
<option></option>
<option name="TLX">6</option>
<option name="TLX">8</option>
<option name="TLX">10</option>
<option name="TLX">12</option>
<option name="TLX">15</option>
<option name="FLX">6</option>
<option name="FLX">8</option>
<option name="FLX">10</option>
<option name="FLX">12</option>
<option name="FLX">15</option>
<option name="FLX">17</option>
<option name="MLX">30</option>
<option name="MLX">40</option>
<option name="MLX">60</option>
</select></td>
<td> </td>
</tr>
</table>
</body>
</html>
我希望能够选择产品，然后电源列表必须相应地进行分拣。
I want to b able to select the product and then must the power list be sortet accordingly.
例如，如果选择了TLX，那么在第二个列表中只显示6,8,10,12和15作为可能性。
For instance if TLX is choosen then only 6, 8, 10, 12, and 15 are shown as possibilities in the second list.
推荐答案
使用vanilla你可以像下面这样做
using vanilla you can do like below
看看演示工作 http://jsfiddle.net/ST5dq/
没有使用名称属性，使用数据 - 名称，值或其他属性，名称属性不通过浏览器到选项标签...
no use name attribute, use data-name, value or other attribute, the name attribute not working cross browser to option tag...
我将使用数据名称
<table width=100% border="0">
<tr>
<td> </td>
<td>Product</td>
<td><select name="product" id="product" width="300" style="width: 300px">
<option></option>
<option id="TLX">TLX</option>
<option id="FLX">FLX</option>
<option id="MLX">MLX</option>
</select></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Power</td>
<td><select name="power" id="power" width="300" style="width: 300px">
<option></option>
<option data-name="TLX">6</option>
<option data-name="TLX">8</option>
<option data-name="TLX">10</option>
<option data-name="TLX">12</option>
<option data-name="TLX">15</option>
<option data-name="FLX">6</option>
<option data-name="FLX">8</option>
<option data-name="FLX">10</option>
<option data-name="FLX">12</option>
<option data-name="FLX">15</option>
<option data-name="FLX">17</option>
<option data-name="MLX">30</option>
<option data-name="MLX">40</option>
<option data-name="MLX">60</option>
</select></td>
<td> </td>
</tr>
</table>
你可以用它来对列表进行排序
you can use this to sort the list
function sortDropdownList(ddl){
var options = [].slice.apply(ddl.options, [0]);
ddl.innerHTML = "";
var sorted = options.sort(function(a,b){
return +(a.innerText) - +(b.innerText);
});
for(var i = 0; i < sorted.length; i++){
ddl.options.add(sorted[i]);
}
}
你需要传递一个dom元素，不是jQuery元素。
you need pass a dom element, not a jQuery element.
绑定选择父级以选择子级你可以这样做
to bind the select parent to select child you can do this
在你的页面上初始化添加代码
on you page initialize add the code
var parentSelect = document.getElementById("product");
var childSelect = document.getElementById("power");
var options = [].slice.apply(childSelect, [0]);
var emptyOption = options[0];
childSelect.innerHTML = "";
parentSelect.addEventListener("change", function(e){
var selectedId = parentSelect.options[parentSelect.selectedIndex].id;
childSelect.innerHTML = "";
childSelect.options.add(emptyOption);
for(var i = 0; i < options.length; i++){
if( options[i].getAttribute("data-name") == selectedId ){
childSelect.options.add(options[i]);
}
}
sortDropdownList(childSelect);
});
这篇关于排序下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
