Question

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

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

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

意思是如果有人在第一个选项列表中选择1，则第二个选项会加载选项a，b，c。

＆＃13;

$("#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);
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

$("#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

例如

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

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

等待所有选择列表加载jQuery

2 个答案: