以下代码是按字母顺序对表单列表选项进行排序,但'getElementsByClassName()'不起作用,我无法弄清楚原因。
我正在使用最新的jQuery。
window.onload=function(){
function sortlist() {
var cl = document.getElementsByClassName('car_options');
var clTexts = new Array();
for(i = 1; i < cl.length; i++) {
clTexts[i-1] =
cl.options[i].text.toUpperCase() + "," +
cl.options[i].text + "," +
cl.options[i].value;
}
clTexts.sort();
for(i = 1; i < cl.length; i++) {
var parts = clTexts[i-1].split(',');
cl.options[i].text = parts[1];
cl.options[i].value = parts[2];
}
sortlist();
}
在正文部分
<form action="" method="get">
<p><label for="car_make"></label>
<select id="car_make" class="car_options" name="car_make">
<option value="">By Make</option>
<option value="Vauxhall">Vauxhall</option>
<option value="BMW">BMW</option>
<option value="Toyota">Toyota</option>
<option value="Lexus">Lexus</option>
<option value="Audi">Audi</option>
<option value="Ford">Ford</option>
</select>
<label for="car_color"></label>
<select name="car_color" id="car_color" class="car_options">
<option value="">By Color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select>
<input type="submit" name="search" id="search" value="Search">
</form>
答案 0 :(得分:10)
使用document.getElementsByClassName('car_options')[0]
getElementsByClassName
返回一组具有所有给定类名的元素。
如果你有多个元素,那么我们必须迭代它。像
var elements = document.getElementsByClassName('car_options');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
}, false);
}
注意:在IE中, IE9 +
支持更新代码
function sortlist() {
var elements = document.getElementsByClassName('car_options');
for (var j = 0; j < elements.length; j++) {
var cl = elements[j];
var clTexts = new Array();
for (i = 1; i < cl.options.length; i++) {
clTexts[i - 1] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value;
}
clTexts.sort();
for (i = 1; i < cl.options.length; i++) {
var parts = clTexts[i - 1].split(',');
cl.options[i].text = parts[1];
cl.options[i].value = parts[2];
}
}
}
答案 1 :(得分:-1)
你的逻辑错了。
您正在迭代cl(这是所有选择列表的集合)。
然后通过相同的索引访问每个列表的选项。您的代码生成数组越界异常