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
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>
Exists a method for click in label and select one specific option into select?
I don't like use JS
Follow the code:
<label for="a">State</label>
<select name="">
<option value="">teste</option>
<option value="">teste X</option>
<option value="" id="a">teste A</option>
</select>
Thanks!
html:
<label data-value="c">C</label>
<select name="" id="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
jQuery:
$(document).on("click", "label", function(evt) {
evt.preventDefault();
$("#myselect").val($(this).data("value"));
});
The below select box works absolutely fine. It redirects depending on the selected option.
<select name="redirect" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.gmail.com">Gmail</option>
</select>
But I have a complex dropdown box like this:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>
I know the above select box makes no sense as i am using onChange to redirect and using type 2 & type 3 as options.
Question: When I select the Type 1 it should redirect to google else if type 2 or type 3 are selected, its values should be submitted to my form.
How can we achieve this. Thank you
You should try something like this:
<select name="menu" onChange="javascript: if (this.value == 'http://www.google.com'){window.document.location.href=this.options[this.selectedIndex].value;}else{document.forms['myform'].submit();} " value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>
PS: Here: document.forms['myform'].submit();....you change myForm with your form name-id ;)
Saludos
html is like this as you want:
<form name="fm_memu">
<input type="text" name="ipt_menu" value=""/>
</form>
<select name="menu" onChange="if(this.selectedIndex){if(this.selectedIndex < 2){window.document.location.href=this.value;}else{window.document.forms['fm_memu']['ipt_menu'].value=this.value;}}" value="GO">
<option value="">Select Project</option>
<option value="http://www.google.com">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
</select>
i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?
$("#myddl").change(function()
{
//update all the dropdown list...
});
http://jsfiddle.net/abuhamzah/4QvfP/
Header:
<br />
<select id="myddl" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<p>Detail</p>
<br />
<select id="Select1" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select2" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select3" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select4" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select5" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.
http://jsfiddle.net/qMXSR/2/
$("#myddl").change(function()
{
$('.detail').find('select').val($(this).val());
});
Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.
$("#myddl").on("change", function(o){
$("select[id^=Select]").val(o.target.value);
});
This code will do it:
$(document).ready(function()
{
$("#myddl").live('change', function()
{
$("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
});
});
The updated JS Fiddle is here: http://jsfiddle.net/leniel/4QvfP/7/
$(function(){
$('#myddl').change(function(){
var value = $(this).val();
$('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
});
})
In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.
i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>