I have select with these 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 check-box:
Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />
after select the check-box, I need to change the select option values to:
<option disabled>Restaurants
<option value="China food">Chinas food
<option value="Pizza">Pizza
<option value="Pub">Pub
but without page refresh. How can I do that?
Mark up both select boxes but have one hidden by default and then toggle it.
$('input[name="restaurants"]').change(function() {
$('select[name="category"]').toggle();
$('select[name="food"]').toggle();
});
<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>
Here is a different approach that separates the data from the choice (not better just different).
//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');
}
})
#source {
display: none;
}
<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>
You can also do this with CSS and a little bit of 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>
This works by using CSS to hide the second select element (because the option-switcher div has a CSS class of either "category" or "food"). The onclick() handler of the select box will simply change the CSS class of the option-switcher and the other select box will be shown.
See this JSFiddle
Related
https://jsfiddle.net/a8r057du/
I don't understand why I don't disable the select "A" when I select the all products option
<form method="post" action="shop.php">
<select name='filterp'>
<option defaultSelected>Please select an option</option>
<option value="allp" isSelect="disabled()">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function disabled()
{
document.getElementsById("A").disabled=false;
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
you have isSelect="disabled()" in your code which doesnt do anything because its not an actual method
to disable the select if the option is selected, you need to use onchange or the change eventListener and check if the option you clicked is the "all products" option
js code :
function change(value){
if(value === "allp"){
document.getElementById("A").disabled = true;
}
}
here, i used an if statement to check if the value is "allp" which is the "all products" option and disable the select element
another problem is you havedocument.getElementById("A").disabled = false; , it should be true
full code:
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
and you also used document.getElementsById which is wrong, it should be getElementById
thank you very much you saved me
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
I'm using JQuery to hide addition inputs based on if a check box is loaded. they're are six of them, so I used a function that will work for all of them (even though their ID's are unique.)
It works fine when they are first selected but when I select one of the Shown options (after click) the page reloads with additional data. During this reload the php checks for a "checked" box and adds the html to declare it checked. However the .js doesn't see this and still hides the child data, unless I uncheck the box and recheck it.
I tried a document load to look for it, and to move the check part of the function outside the check event.
<script>
$(function() {
$('.hidden').hide();
$('.trigger').change(function() {
var hiddenId = $(this).attr("data-trigger");
if ($(this).is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
});
});
</script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>
I am wanting this to see if the check box is checked first then hide it if not.
$(function() {
// listen for trigger changes
$('.trigger').change(function() {
updateView();
});
// on page load checks the trigger value and updates the view
updateView();
});
function updateView(){
var hiddenId = $('.trigger').attr("data-trigger");
if ($('.trigger').is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
}
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>
I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min Price</option>
<option value="100000">£100,000</option>
<option value="200000" >£200,000</option>
<option value="300000" >£300,000</option>
<option value="400000" >£400,000</option>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/
Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();
How can you run jQuery when any option group option is selected. In this case I want to make inputs show and hide based on when any option in one of the two option groups is selected.
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
<input id="inputOne" type="text" placeholder="Input one"/>
<input id="inputTwo" type="text" placeholder="Input two"/>
JSFiddle
http://jsfiddle.net/u76eynap/2/
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
JS
$("#inputOne, #inputTwo").hide();
$('select').change(function () {
if ($("select option:selected").parent()[0].label == "One") {
$("#inputOne").show();
$("#inputTwo").hide();
} else if ($("select option:selected").parent()[0].label == "Two") {
$("#inputTwo").show();
$("#inputOne").hide();
} else {
$("#inputOne, #inputTwo").hide();
}
});
Try this :Initially hide input fields. Then get the parent of selected option and read its label. Using that label identify the input and make it visible
HTML:
<input id="inputOne" type="text" placeholder="Input one" style="display:none;"/>
<input id="inputTwo" type="text" placeholder="Input two" style="display:none;"/>
jQuery:
$(function(){
$('select').change(function(){
var $optionGroup = $(this).find('option:selected').closest('optgroup');
//use jquery start attribute selector to hide all inputs
$('input[id^=input]').hide();
//select input respective to selected optgroup and show it.
$('input[id=input' + $optionGroup.attr('label') + ']').show();
});
});
JSFiddle Demo
I am not sure if this is a html or javascript tech.
I want to achieve like that, only show two select boxes,
once I clicked India, another select box will shows only Indiacities options name="listtwo" id="listtwo", if clicked US, shows us cities options.
Could someone please give an example. Many thanks
India
US
Germany
<select name="listtwo" id="listtwo">
<option value="Indiacity1">Indiacity1</option>
<option value="Indiacity2">Indiacity1</option>
<option value="Indiacity3">Indiacity1</option>
</select>
<select name="list3" id="list3">
<option value="Germany1">Germany1</option>
<option value="Germany2">Germany1</option>
<option value="Germany3">Germany1</option>
</select>
<select name="list4" id="list4">
<option value="US1">US1</option>
<option value="US2">US1</option>
<option value="US3">US1</option>
</select>
HTML:
<select id="country-select">
<option>--- Select One ---</option>
<option value="us">US</option>
<option value="germany">Germany</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="austin">Austin</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="berlin">Berlin</option>
</select>
CSS:
.hide {
display: none;
}
jQuery:
$('#country-select').change(function (e) {
$('.sub-menu').hide();
var selectedCountry = $(this).val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
});
And the Fiddle for anyone to check out: http://jsfiddle.net/RPWPZ/3/
Of course you would have to add all the items for India, and any other countries you'll be caring about.
Edit: if you want a country selected when the page loads, look at the changes in this Fiddle: http://jsfiddle.net/RPWPZ/5/
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('select').hide();
$('#list2').show();
$('.country').click(function(e) {
$('select').hide();
$('#'+$(e.target).attr('sel')).show();
});
});
</script>
<a class="country" href="javascript:;" sel="list2">India</a>
<a class="country" href="javascript:;" sel="list3">Germany</a>
<a class="country" href="javascript:;" sel="list4">US</a>
<br><br>
<select name="list2" id="list2">
<option value="Indiacity1">Indiacity1</option>
<option value="Indiacity2">Indiacity1</option>
<option value="Indiacity3">Indiacity1</option>
</select>
<select name="list3" id="list3">
<option value="Germany1">Germany1</option>
<option value="Germany2">Germany1</option>
<option value="Germany3">Germany1</option>
</select>
<select name="list4" id="list4">
<option value="US1">US1</option>
<option value="US2">US1</option>
<option value="US3">US1</option>
</select>