Question

有两个选择元素。如果在第一个选择元素中选择了abc值，则abc组项目发生在第二个选择元素中。

我想这样做。这个如何制作？

<select id="bolum" onChange="giveSelection(this.value)">
  <option value="bp">bp</option>
  <option value="mv">mv</option>
</select>
<select id="ders">
  <option data-option="bp">gorsel</option>
  <option data-option="bp">internet</option>
  <option data-option="mv">vergi</option>
  <option data-option="mv">maths</option>
</select>


var bolum = document.querySelector('#bolum');
var ders = document.querySelector('#ders');
var options2 = ders.querySelectorAll('option');

        function giveSelection(selValue) {

            ders.innerHTML='';

            for(var i = 0; i < options2.length; i++) 
              {
                if(options2[i].dataset.option === selValue) 
                {
                  ders.appendChild(options2[i]);
                }
              }
        }

giveSelection(bolum.value);

Answer 1

使用jQuery这样的东西？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id = 'first'>
    <option disabled selected>--select</option>
    <option>ABC</option>
    <option>123</option>
</select>
<select id = 'second' style = 'display:none'>
</select>
<script>
    var optionsAbc = '<option>A</option><option>B</option>';
    var options123 = '<option>1</option><option>2</option>';
    $("#first").change(function() {
        $("#second").show();
        var value = $(this).val();
        if(value == 'ABC') {
            $("#second").html(optionsAbc);
        } else if (value == '123') {
            $("#second").html(options123);
        }
    });
</script>

如果在select元素中选择abc，则第二个select元素中的abc组项如何发生

1 个答案: