0

我遇到了一个 jquery 问题。如果所选值为“interestingValue”，我实际上想禁用所有（除父项之外的所有其他项目）

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

例如：如果我们从我们得到的第一个菜单中选择“interestingValue”

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2" disabled="disabled">bar foo2</option>
      <option value="foo2" disabled="disabled">foo abc2</option>
      <option value="bar2" disabled="disabled">foo abc2</option>
    </select>

例如：如果我们从第二个菜单中选择“interestingValue2”，我们会得到

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue" disabled="disabled">bar foo</option>
      <option value="foo1" disabled="disabled">foo abc1</option>
      <option value="bar1" disabled="disabled">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

谢谢 ：）

4

4 回答 4

1

如果您的选择标签是兄弟姐妹，您可以尝试：

$('select').change(function(){
  if (this.selectedIndex == 0) {
     $(this).siblings('select').find('option').prop('disabled', true)
  }
})

演示

于 2012-07-27T18:27:13.937 回答
0

我不确定我明白了，但是是这样的：

$('[id^=menufoo]').on('change', function() {
    if (this.value.indexOf('interestingValue') != -1 ) {
        $('[id^=menufoo]').not(this).find('option').prop('disabled', true);
    }else{
        $('[id^=menufoo]').find('option').prop('disabled', false);
    }
});​

小提琴

于 2012-07-27T18:25:43.157 回答
0

您可以将 onchange 事件附加到两个选择项，并检查新的选择值是否等同于第一个菜单的interestingValue 和第二个菜单的interestingValue2。您可以使用 .prop() 禁用此功能。

你可以这样做：

$("#menufoo").bind("change", function(event){

  $("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));

});

$("#menufoo2").bind("change", function(event){
  $("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});
于 2012-07-27T18:26:55.730 回答
0

干得好

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#menufoo").change(function (){
    if($("#menufoo option:selected").val()=="interestingValue")
        $('.menufooClass2 option').attr('disabled','disabled');
  });
    $("#menufoo2").change(function (){
    if($("#menufoo2 option:selected").val()=="interestingValue2")
        $('.menufooClass option').attr('disabled','disabled');
  });


});
</script>   


   <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

        <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>
于 2012-07-27T18:40:25.487 回答