如何在不刷新PHP的情况下更改SELECT with CHECKBOX中的选项 - How to change options in SELECT with CHECKBOX without refresh PHP

How to change options in SELECT with CHECKBOX without refresh PHP

我选择了这个选项：

<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="" />

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

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

但无需刷新页面。我该怎么做？谢谢

我会使用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;
  }
};

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

您将能够引用您的下拉菜单"kategory"并在选中复选框后更新选项。

如果这是您想走的路线，但不确定如何去做，请告诉我们，我们可以提供示例。

编辑：无盐使用对象有正确的想法。如果你想要另一个选项，只是清空选择并直接构建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);
    }
});