1

選択リストに 2 つの optgroup があり、車両の選択で 1 つの optgroup を表示し、他を非表示にしようとしています。

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        
        jQuery(this).select2();
      
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike">Bike</option>
</select>

<select id="car" name="car">
  <optgroup label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

私が望むのは、「車」を選択すると「自転車」のoptgroupが非表示になり、「自転車」を選択すると「車」のoptgroupが非表示になることだけです。

ありがとう

4

3 に答える 3

2

オプションを削除するのではなく、単に無効にしたほうがよい (そしてユーザー フレンドリーな) 場合があります。これは Select2 でもネイティブにサポートされているため、無効になっているオプションをユーザーが選択することはできません。

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        jQuery(this).select2();
    });

    jQuery('#vehicle').on('change', function() {
        if ($(this).val() == 'car') {
            $('#car-bike option').prop('disabled', true);
            $('#car-car option').prop('disabled', false);
        } else {
            $('#car-bike option').prop('disabled', false);
            $('#car-car option').prop('disabled', true);
        }

        // Tell Select2 to update the current selection
        // Some browsers (correctly) switch the selected option if it is disabled
        // Others don't, which is unfortunate
        $('#car').trigger('change');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike">Bike</option>
</select>

<select id="car" name="car">
  <optgroup id="car-bike" label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup id="car-car" label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

于 2015-04-05T21:10:18.140 に答える
0

選択したオプションの値をリッスンして、それに基づいて結果を操作できます。たとえば、次のようになります。

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        
        jQuery(this).select2();

        $('#vehicle').change(function(){
           if($(this).val() == 'car'){ 
           $('#bike').remove();
          }
        });
      
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select id="vehicle" name="vehicle">
  <option value="car">Car</option>
  <option value="bike" selected>Bike</option>
</select>

<select id="car" name="car">
  <optgroup id="bike" label="Bike">
    <option value="001">Kawasaki</option>
    <option value="002">Suzuki</option>
  </optgroup>
  <optgroup label="Car">
    <option value="c001">Mclaren</option>
    <option value="c002">Ferrari</option>
  </optgroup>
</select>

于 2015-04-04T00:03:08.030 に答える