Question

我有两个选择列表。如何使用jquery，我只能在第二次选择中显示第一次选择中具有相同选项值的选项？

例如，对于第一次选择中的衣服，仅显示第二个列表中的clothes - mens和clothes - ladies。

<select name="cat">
    <option value="1">clothes</option>
    <option value="2">shoes</option>
    <option value="3">other</option>
</select>

和

<select name="prod">
    <option value="1">clothes - mens</option>
    <option value="1">clothes - ladies</option>
    <option value="2">shoes - mens</option>
    <option value="2">shoes - ladies</option>
    <option value="3">other - mens</option>
    <option value="3">other - ladies</option>
</select>

Answer 1

你可以看看这个

http://jsfiddle.net/YVtwY/

var prod = $('select[name=prod]');

$('select[name=cat]').on('change', function() {
    var self = $(this);

    // hide everything at first
    prod.find('option').hide();

    // show the selected
    prod.find('option[value='+ self.val() +']').show();

    // set the first item to be the first of the seleted
    prod.find('option[value='+ self.val() +']:first').prop('selected',true);
}).change();

Answer 2

试试这个。希望这会奏效......

<script>
function find(value)
{
   if(value=="1")
   {
      $("select[name=prod]").html("<option>clothes-men</option><option>clothes-women</option>");
  }
}
</script>

<select name="cat" onchange="find(this.value)">
<option value="1">clothes</option>
<option value="2">shoes</option>
<option value="3">other</option>
</select>


<select name="prod">
</select>

同样编写其他两个值的代码＆＃34; 2＆＃34;和＆＃34; 3＆＃34;。此代码根据第一个下拉列表中的值动态生成第二个下拉列表的值。

显示选项 - 使用jQuery选择

2 个答案: