Question

嘿伙计我使用简单的选项在html代码中选择如下：

<form>
        <select class="select" name="select3" id="select3">
          <option value="0">0</option>
          <option value="1">1</option>
        </select>
</form>

我希望能够添加另一个选择形式，例如：

  <form>
            <select class="select" name="select4" id="select4">
              <option value="2">4</option>
              <option value="3">5</option>
            </select>
</form>

但我只想在第一种形式中选择某个值时才会出现，我该如何在jquery中这样做呢？

Answer 1

这可能不是您想要的，但请考虑以下因素：

在这个HTML中我们有两个选择

<select name="select1">
  <option value="val1">value 1</option>
  <option value="val2">value 2</option>
  <option value="val3">value 3</option>
</select>

<select name="select2" disabled="">
  <option value="val1" disabled="">value 1</option>
  <option value="val2" disabled="">value 2</option>
  <option value="val3" disabled="">value 3</option>
</select>

以下函数将等待select 1中的更改。并且根据值，它将启用或禁用select 2中的选项。可选地，您可能会尝试使用css，但这可能会在以后证明是一种痛苦。< / p>

(function($){
    $(document).ready(function(){
    $('select[name="select1"]').on('change', function(){ //wait for changes in select 1
        var sel1 = $(this);
      var sel2 = $('select[name="select2"]');

            sel2.removeAttr("disabled");  //Enables Select 2
            sel2.children().attr('disabled','disabled'); //Disables all select  2 options

      if(sel1.val() === 'val1'){//Checks the select value
        sel2.find('option[value="val1"]').removeAttr('disabled'); //enables a specific option
        sel2.find('option[value="val2"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val2'){
        sel2.find('option[value="val2"]').removeAttr('disabled');
        sel2.find('option[value="val3"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val3'){
        sel2.children().removeAttr("disabled");
      }
    });  
  });

})(jQuery);

这是一个jsfiddle example

这是一个similar question

使用JQUERY选择Parent-Children Iteration

1 个答案: