javascript - 等待所有选择列表加载 jQuery

Question

我有两个选择列表，第二个取决于第一个。我想允许加载第二个选择列表，然后触发一些警报。使用 jQuery 实现此目的的最佳方法是什么？

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

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

这意味着如果有人在第一个选项列表中选择 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

除了 #second以某种方式加载元素，更好的想法是仅添加和替换 HTML 元素。这意味着我们从 #second 开始为空并更改 <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>