等待所有 select 列表加载 jQuery

Question

我有两个 select 列表，第二个依赖于第一个。我想允许加载第二个 select 列表，然后再发出一些警报。使用 jQuery 实现此目的的最佳方法是什么？

例如：第二个列表按以下方式填充：

1 - a,b,c
2 - b,c,d
3 - a,c,d
4 - a,b

意味着如果某人 select 在第一个选项列表中为 1，则第二个选项将加载选项 a、b、c。

$("#first").change(function() {  // bind a change event:
      refreshsecond(document.theForm);
    }).change(); // and trigger a "change" event immediately


function refreshsecond(form)
{
var length = $('#second').children('option').length;

alert("Length is :" + length);
}

<select id="first" name="firstName">
 <option value='1'>1</option> 
<option value='2'>2</option>   
<option value='3'>3</option> 
<option value='4'>4</option>   
</select>

<select id="second" name="secondName">
    <option value='a'>a</option>
    <option value='b'>b</option>  
    <option value='c'>c</option>
    <option value='d'>d</option>  
    </select>

Answer 1

如果它依赖于用户在第一个下拉列表中选择一个，您只需将 onChange 处理程序附加到第一个下拉列表。

例如

$('#first').change(function() { 
 //do your stuff here to second dropdown list.
});

查看 http://api.jquery.com/change/ 了解更多详情。

Answer 2

除了 #second 以某种方式加载元素外，更好的办法是只添加和替换元素 HTML。这意味着我们从 #second 开始为空，然后根据第一个 select 框的值更改 <option> 项目。例如：

$("#first").change(function() { 

    if($(this).val() == 1) 
        $("#second").html(loadValues(['a','b','c']));
    else if($(this).val() == 2) 
        $("#second").html(loadValues(['b','c','d']));
    else if($(this).val() == 3) 
        $("#second").html(loadValues(['a','c','d']));  
    else if($(this).val() == 4) 
        $("#second").html(loadValues(['a','b']));

    var length = $('#second').children('option').length;
    alert("Length is :" + length); 
   
}).change();
    
function loadValues(ArrValues){
    var string = "";
    for(var i = 0; i < ArrValues.length; i++)
        string += "<option value='"+ArrValues[i]+"'>"+ArrValues[i]+"</option>";
    return string;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" name="firstName">
  <option value='1'>1</option> 
  <option value='2'>2</option>   
  <option value='3'>3</option> 
  <option value='4'>4</option>   
</select>

<select id="second" name="secondName">
</select>

等待所有 select 列表加载 jQuery

Wait for all the select lists to load jQuery

javascript

jquery

selectlist