Question

我选择了这个选项：

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

我有一个chceck框：

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

在chceckbox中单击true后我需要将select选项值更改为：

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

但无需刷新页面。我怎样才能做到这一点？感谢

Answer 1

如果您不想刷新页面，则需要考虑使用Javascript / jQuery。这些是您正在寻找的（IMO）的绝佳工具。

您可以在选中复选框后参考下拉菜单“kategory”并更新选项。

如果这是您想要去的路线并且不确定如何操作，请告诉我们，我们可以提供示例。

编辑：unsalted有正确的想法使用对象。如果你想要另一个只清空select并在这里直接构建html的选项是另一种使用jQuery的方法。

$('input[name="restaurants"]').change(function(){
    if( this.checked )
    {
        var select = $('select[name="kategory"]');
        select.empty();

        var options = '';
        options += '<option disabled>Restaurants</option>';
        options += '<option value="China food">Chinas food</option>';
        options += '<option value="Pizza">Pizza</option>';
        options += '<option value="Pub">Pub</option>';

        select.html(options);
    }
});

Answer 2

无论你更喜欢什么，我都会使用javascript或jquery。没试过这个，但这样的事情应该有用。

HTML：

<select name="kategory" class="select-field">
                          <option disabled>ATRACTIONS
                          <option value="">
                          <option value="Castles">Castles
                          <option value="History">History
</select>
<br>
<span>Do you want to eat?</span>
<input type="checkbox" class="checkbox" name="restaurants" value="" onchange="changeSelect()"/>

JQUERY：

// options
var myOptions = {
    val1 : 'Chinese food',
    val2 : 'Pizza',
    val3 : 'Pub'
};
var mySelect = $('.select-field');

function changeSelect(element){
  if (element.checked){
    $.each(myOptions, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
  } else {
    return;
  }
};

如何在不刷新PHP的情况下使用CHECKBOX更改SELECT中的选项

2 个答案: