How to change options in SELECT with CHECKBOX without refresh PHP - php

Question

I have select with this options:
<select name="kategory" class="select-field">
<option disabled>ATRACTIONS
<option value="">
<option value="Castles">Castles
<option value="History">History
</select>
And I have a chceck box:
Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />
after I click in chceckbox for true I need change the select option values to :
<option disabled>Restaurants
<option value="China food">Chinas food
<option value="Pizza">Pizza
<option value="Pub">Pub
but with no need to refresh page. How can I do that? thanks

Answer 1

I would use javascript or jquery whatever you are more comfortable with. Haven't tried this but something like this should work.
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;
}
};

Answer 2

If you do not want to refresh the page, you will want to look into using perhaps Javascript/jQuery. These are great tools for what you are looking for (IMO).
You will be able to reference your dropdown 'kategory' and update the options after checking the checkbox.
If that's the route you would like to go and are not sure how to do so, let us know and we can include examples.
Edit: unsalted has the right idea using objects. If you want another option that just empties the select and builds the html directly here is another way using 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);
}
});