发表新帖
发表新帖

Second drop-down options based on first drop-down

前端 未结
关注
3 1568
离开以前
离开以前 2021-01-26 12:45

On a web page, if you select different options on the first drop-down, different options will appear in the second drop-down.
提交评论
  •  加载中...
  • 难免孤独
    2021-01-26 13:06

    The following loops through the options. If the option's value doesn't start with the correct first letter, a class is added to hide via css. If it does match, the class is removed. It also selects the first option that matches the correct letter, so a hidden option isn't selected.

    $(function() {
    $('#independent').on('change', function (e) {

      var selected = $('#independent').val().toUpperCase();
      var currentDep = $('#dependent').val().charAt(0).toUpperCase();
      var changedSelected = false;

      $('#dependent option').each(function() {

        var opt = $(this);
        var value = opt.val().charAt(0).toUpperCase();

        if (value !== selected) {

          opt.addClass('hide');
          opt.removeAttr('selected');

        } else {

          opt.removeClass('hide');

          if (!changedSelected) {

            opt.attr('selected', 'selected');
            changedSelected = true;

          } else {
            opt.removeAttr('selected');
          }
        }
      });
    });
});
    .hide {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

    0 讨论(0)
  • 庸人自扰
    2021-01-26 13:07

    You could try like this.

    First hide all the options and show only matching options using toggleClass()

    $(function() {

    $('#independent').on('change', function (e) {
    $('#dependent').val('');
        var endingChar = $(this).val().split('').pop();       
        var selected = $( '#independent' ).val();
          $('#dependent option').addClass('show');
 
          $('#dependent option[value^='+selected+']').toggleClass('show');
    })

});
    .show{
display:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题