Question

我选择了这些选项：

<select name="kategory" class="select-field">
    <option disabled>ATRACTIONS
    <option value="">
    <option value="Castles">Castles
    <option value="History">History
</select>

我有一个复选框：

Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />

选中复选框后，我需要将选择选项值更改为：

<option disabled>Restaurants
<option value="China food">Chinas food
<option value="Pizza">Pizza
<option value="Pub">Pub

但没有页面刷新。我怎么能这样做？

Answer 1

标记两个选择框，但默认情况下隐藏一个，然后切换它。

＆＃13;

$('input[name="restaurants"]').change(function() {
  $('select[name="category"]').toggle();
  $('select[name="food"]').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Do you want to eat? <input type="checkbox" name="restaurants" />

<select name="category">
	<option value="castles">Castles</option>
	<option value="history">History</option>
</select>    

<select name="food" style="display: none;">
	<option value="chinese">Chinese</option>
	<option value="pizza">Pizza</option>
	<option value="pub">Pub</option>
</select>

＆＃13;

Answer 2

这是一种将数据与选择区分开来的不同方法（不仅仅是更好）。

＆＃13;

//Generalized into a function
function getList(name) {
    $('#Choice').empty().append($('#source optgroup[data-type='+name+']').clone());
}
//Pull default data from Attractions
getList('Attractions');

$('input[name=restaurants]').on('change', function() {
    if($(this).is(':checked')) {
        //Replace with data from Restaurants
        getList('Restaurants');
    } else {
        //Replace with data from Attractions
        getList('Attractions');
    }
})

＆＃13;

#source {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />

<select id='Choice'></select>

<select id='source'>
    <optgroup data-type='Attractions'>
        <option disabled>ATTRACTIONS</option>
        <option value="Castles">Castles</option>
        <option value="History">History</option>
    </optgroup>
    <optgroup data-type='Restaurants'>
        <option disabled>Restaurants</option>
        <option value="China food">Chinas food</option>
        <option value="Pizza">Pizza</option>
        <option value="Pub">Pub</option>
    </optgroup>
</select>

＆＃13;

Answer 3

你也可以用CSS和一些Javascript来做到这一点。

<style>
  #option-switcher select { display: none; }
  #option-switcher.category select[name="category"] { display: block; }
  #option-switcher.food select[name="food"] { display: block; }
</style>

<div id="option-switcher" class="category">
  <select name="category">
    <option value="castles">Castles</option>
    <option value="history">History</option>
  </select>    

  <select name="food">
    <option value="chinese">Chinese</option>
    <option value="pizza">Pizza</option>
    <option value="pub">Pub</option>
  </select>
<div>
Do you want to eat?<input onclick="toggleSelect()" type="checkbox" class="checkbox" name="restaurants" value="" />

<script>
  function toggleSelect() {
    document.getElementById('option-switcher').setAttribute('class', 'food')
  }
</script>

这可以通过使用CSS来隐藏第二个选择元素（因为选项切换器div具有“类别”或“食物”的CSS类）。选择框的onclick（）处理程序将只更改选项切换器的CSS类，并显示另一个选择框。

请参阅此JSFiddle

如何使用CHECKBOX更改SELECT中的选项而不刷新

3 个答案: