Dynamically select Drop Down in Jquery

前端 未结 4 892
遇见更好的自我
遇见更好的自我 2021-01-29 09:16

I have 4 Drop Downs.

Each drop by default has a --select-- option. Each box has a unique id. As you can see, the second drop down is disabled if the above drop

相关标签:
4条回答
  • 2021-01-29 09:37

    Rather than hiding the options, I would use the disable attribute (comments in code):

    var selects = $('.drop-down');
    selects.not(':eq(0)').prop('disabled', true); // disable all but first drop down
    
    selects.on('change', function() {
      var select = $(this),
          currentIndex = selects.index(select),
          nextIndex = currentIndex + 1;
      
      // only do this if it is not last select
      if (currentIndex != selects.length - 1) { 
        selects.slice(nextIndex)        // get all selects after current one
               .val('')                 // reset value
               .prop('disabled', true); // disable 
        
        selects.eq(nextIndex).prop('disabled', select.val() === ''); // disable / enable next select based on val
      }
      
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select class="drop-down">
      <option value="">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select><br>
    <select class="drop-down">
      <option value="">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select><br>
    <select class="drop-down">
      <option value="">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select><br>
    <select class="drop-down">
      <option value="">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

    0 讨论(0)
  • 2021-01-29 09:38

    Assuming the option that has '--select--' as text has no value, just use val on the handler to check if the selected option is other than the empty

    if(this.val() !== '') {
    // enable following select
    }
    
    0 讨论(0)
  • Check this one;

    HTML code:

    <select id="sel-1"></select>
    <select id="sel-2"></select>
    <select id="sel-3"></select>
    <select id="sel-4"></select>
    

    JS Code:

    $(document).ready(function(){
    
         $("[id^=sel]").change(function(){
    
               /*
               *  find out the current box id
               */
    
               var id=$(this).attr("id");
               /*
               *  find out the current box id order number
               */
    
               var ordernumber=id.split("-")[1];
    
               if($(this).val()!="select")
               {
                     //enable next one
                     $("#sel-"+(ordernumber+1)).show();
               }
         })
    })
    
    0 讨论(0)
  • 2021-01-29 09:52

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
      select {
        margin: 5px 0;
        display: block;
      }
    </style>
    <script>
      $(function() {
        $('.cls-select').change(function() {
    
          if ($(this).val() == '--select--') {
    
            // reset and disable the next drop downs
            $('.cls-select:gt(' + $('.cls-select').index($(this)) + ')').val('--select--').prop('disabled', true)
    
          } else {
    
            // current drop down has value so enable the next drop down
            $(this).next().prop('disabled', false);
          }
        });
      })
    </script>
    
    <select class="cls-select">
      <option>--select--</option>
      <option>one</option>
      <option>two</option>
    </select>
    <select class="cls-select" disabled>
      <option>--select--</option>
      <option>one</option>
      <option>two</option>
    </select>
    <select class="cls-select" disabled>
      <option>--select--</option>
      <option>one</option>
      <option>two</option>
    </select>
    <select class="cls-select" disabled>
      <option>--select--</option>
      <option>one</option>
      <option>two</option>
    </select>

    0 讨论(0)
提交回复
热议问题