I have a simple jQuery select menu that displays content depending on selection.
Here is my jsFiddle & my code is below.
Bug#1: When I initially select US, the State dropdown doesn't appear. I have to select UK first, then US before this kicks in. Why?
Bug#2: Right now, I'm using:
if(jQuery('#statecat').val()=="ak")
jQuery('.ak').show();
}); - is there a more efficient way to do this, so I don't have to do this for all 50 states?
Bug#3: When I go from Alaska back to Choose a State..., the US results are blank. Why?
Many thanks for any help with this.
CODE
<form method="get" action="/" id="languageSwitch">
<fieldset>
<select name='cat' id='cat' class='postform' >
<option value='0' selected='selected'>Choose a country…</option>
<option class="level-0" value="united-kingdom">United Kingdom</option>
<option class="level-0" value="us">US</option>
</select>
<script type="text/javascript">
jQuery('#cat').change(function(){
jQuery('#cat').change(function() {
jQuery("#statecat").toggle(jQuery(this).val() == "us");
});
if(jQuery('#cat').val()=="0")
jQuery('form#languageSwitch').siblings('div').show();
else{
jQuery('form').siblings('div').hide();
jQuery('.'+jQuery('#cat').val()).show();
}
});
</script>
</fieldset>
</form>
<form method="get" action="/" id="stateSwitch">
<fieldset>
<select name='statecat' id='statecat' class='postform' >
<option value='0' selected='selected'>Choose a state…</option>
<option class="level-0" value="ak">Alaska</option>
<option class="level-0" value="wy">Wyoming</option>
</select>
<script type="text/javascript">
jQuery('#statecat').change(function(){
jQuery('.state1').each(function(){jQuery(this).hide(); });
if(jQuery('#statecat').val()=="ak")
jQuery('.ak').show();
});
</script>
</fieldset>
</form>
<div class="united-kingdom">
<h2>United Kingdom</h2>
</div>
<div class="us">
<h2>US</h2>
<div class="ak state1">
<h2>Alaska</h2><ul>
<li class="animal-listing" id="post-123">
Alaska Test<br />
Address:<br />Address<br />
Country: Alaska<br />
URL: http://www.somesite.co.nz<br />
Telephone: 01902<br />
Fax: 01293
</li>
</div>
<div class="wy state1">
<h2>Wyoming</h2>
</div>
</div>
The first problem of the 'state' dropdown not appearing on the first selection was because for some reason you had nested change() handlers, so that event wasn't fired until the second selection was made.
Secondly, you can shorten your code by concatenating the selector for the display div of the state chosen from the value of the dropdown like this:
$('.' + $('#statecat').val()).show();
I also included some improvements to your code, such as removing unnecessary loops and caching selectors:
$('#cat').change(function () {
var val = $(this).val();
$("#statecat").toggle(val == "us");
if (val == "0")
$('#languageSwitch').siblings('div').show();
else {
$('form').siblings('div').hide();
$('.' + val).show();
}
});
$('#statecat').change(function() {
$('.state1').hide();
$('.' + $(this).val()).show();
});
Updated Fiddle
Related
I'm making a research form which will display differently depending on the choice of a SELECT value. I have applied some jQuery tricks after searching through here. Unfortunately, it doesn't work at all. Here is my code:
HTML:
<select name="options" id="choice">
<option value="0" selected="true">Choose...</option>
<optgroup label='ABC'>
<option value="1">...DEF</option>
<option value="2">...GHL</option>
</optgroup>
<optgroup label="MNP:">
<option value="3">X</option>
<option value="4">Y</option>
<option value="5">Z</option>
</optgroup>
</select>
<form id="opt1" name="opt1" style="display: none">11111111</form>
<form id="opt2" name="opt2" style="display: none">22222222</form>
<form id="opt3" name="opt3" style="display: none">33333333</form>
<form id="opt4" name="opt4" style="display: none">44444444</form>
<form id="opt5" name="opt5" style="display: none">55555555</form>
JavaScript:
$("#choice").change(function() {
$("form").hide();
$("#opt" + $(this).val()).show();
});
Try this one
$(document).ready(function(){
$('select').change(function() {
//var selected = $(':selected', this);
//alert(selected.closest('optgroup').attr('label'));
$("form").hide();
$("#opt" + $(this).val()).show();
});
});
DEMO here
A #guradio suggests, the code works fine in fiddle. To debug the issue try putting alerts or console.log() to know that the issue it. Hope you have the jQuery library added to your page.
Try these:
$("#choice").change(function() {
alert('fine till here');
$("form").hide();
$("#opt" + $(this).val()).show();
});
Your code is working,I think you are missing j query library on form. please add.
see jsfiddle.net/f5xuc0gh/
I'd like to display the english1 div if 'English' is selected & french div if French is selected.
How do I achieve this using Javascript?
<form method="get" action="/">
<fieldset>
<select name='cat' id='cat' class='postform' >
<option value='0' selected='selected'>Choose one…</option>
<option class="level-0" value="english1">English</option>
<option class="level-0" value="french1">French</option>
</select>
<script type="text/javascript"><!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value != '0' ) {
location.href = "http://localhost:8888/mysite/?language="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
--></script>
</fieldset>
</form>
<div class="english1">english</div>
<div class="french1">french</div>
Many thanks :-)
You can use this snippet:
$('#cat').change(function(){
$('form').siblings('div').hide();
$('.'+$('#cat').val()).show();
});
Working Demo
I have this code working in Chrome and FF, but it is not working in IE. It is a simple form with 2 drop downs, with the second drop down filtering based on the first. The selection then brings you to a different site on Submit. In IE, the filtered options are greyed out rather than hidden.
<!DOCTYPE html>
<head>
<html>
<title>Dropdowns</title>
<script src="./jquery-1.11.0.min.js"></script>
<script>
function filterList(countryList) {
var selected = countryList.find(":selected").text();
if (selected == "US") {
showOption($("#city .US"));
hideOption($("#city .UK, .IE"));
}
else if (selected == "UK") {
showOption($("#city .UK"));
hideOption($("#city .US, .IE"));
}
else {
showOption($("#city .IE"));
hideOption($("#city .UK, .US"));
}
$("#city").find("option:not(:disabled):first").prop('selected', true);
}
function hideOption(option) {
option.attr("disabled", 'disabled');
option.hide();
}
function showOption(option) {
option.removeAttr('disabled');
option.show();
}
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function () {
filterList($(this));
});
});
</script>
<script>
$(document).ready(function () {
var countryList = $("#country");
filterList(countryList);
$("#country").change(function(){
filterList($(this));
});
});
</script>
</head>
<body>
<div>
<h1>Please select your home city</h1>
</div>
<form name="dropdown" id="dropdown">
<div>
<select class="country" id="country" name="country">
<option value="United States">US</option>
<option value="United Kingdom">UK</option>
<option value="Ireland">IE</option>
</select>
</div>
<div>
<select class="city" id="city" name="city">
<!-- US options Below -->
<option value="http://www.google.ie" class="US">Chicago</option>
<option value="http://www.google.com" class="US">New York</option>
<option value="http://www.stackoverflow.com" class="US">Miami</option>
<!-- UK options Below -->
<option value="http://www.linkedin.com" class="UK">London</option>
<!-- Ireland options Below -->
<option value="http://www.ebay.com" class="IE">Ireland</option>
</select>
</div>
<div>
<input type="checkbox" name="checkbox" value="checkbox" />Remember my
selection<br />
</div>
<div>
<input type="button" value="Set as My Home" onclick=
"goToNewPage(document.dropdown.city)" />
</div>
</form>
</body>
</html>
Not all browsers support hiding option elements, IE for instance does not support hiding an option in any way.
The "greyed out" you're seeing is what happens when you disable an option, and you're not only hiding them, but disabling them as well.
As a sidenote, disabled in this context is a property, and you should be using
option.prop('disabled', true);
The cross browser way to filter options inside a select is to remove and insert the elements, not hide and show them.
I am having trouble making my drop down menu dynamically show blocks of html code which are labelled style="display:none".
I have following code.
<script type="text/javascript">
$(\'select[name="questiontype"]\').change(function(){
if ($(this).val() == "multiple")
alert("call the do something function on option multiple");
else
alert("call the do something function on option programming");
});
</script>
<form action="addQuestion.php" method="post">
<select name="questiontype">
<option name="questiontype" value="multiple" click="return showMultiple();">Multiple Choice< /option>
<option selected name="questiontype" value="programming" click="return showProgramming();">Programming< /option>
</select><br>
<input type="hidden" name="course" value="'.$course.'" />
<div id=\'multiple\' style="display:none">
Multiple
</div>
<div id=\'programming\' style="display:none">
Programming
</div>
</form>
i tried these functions to .show() the div's by id from the dropdown menu but no luck and I'm not sure what I'm doing wrong. I also removed some code in the div id blocks to make it easier to read.
<script>
function showMultiple(){
$('#multiple').show();
$('#programming').hide();
return false;
}
function showProgramming(){
$('#multiple').hide();
$('#programming').show();
return false;
}
</script>
demo
HTML
<select id="selectMe">
<option value="multiple">multiple</option>
<option value="programming">Programming</option>
</select>
<br><br><br>
<div id="multiple" class="group" >
Multiple
</div>
<div id="programming" class="group" >
Programming
</div>
JS
$(document).ready(function () {
$('.group').hide();
$('#multiple').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
In your select option you are using click instead of onclick event
<select name="questiontype">
<option name="questiontype" value="multiple" onclick="return showMultiple();">Multiple Choice</option>
<option selected name="questiontype" value="programming" onclick="return showProgramming();">Programming< /option>
</select>
And no need to use escape for single quotes,
<div id='multiple' style="display:none">
Multiple
</div>
<div id='programming' style="display:none">
Programming
</div>
and in script tag
$('select[name="questiontype"]').change(function(){
Try this:
<form action="addQuestion.php" method="post">
<select name="questiontype" id="questiontype">
<option value="multiple">Multiple Choice</option>
<option selected value="programming">Programming</option>
</select>
<br>
<div id='multiple' class="group" style="display:none">
Multiple
</div>
<div id='programming' style="display:none" class="group">
Programming
</div>
</form>
Put this code in head section:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.group').hide();
$('#programming').show();
$('#questiontype').change(function () {
$('.group').hide(1000);
$('#'+$(this).val()).show(1000);
})
});
</script>
These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});
Html Setup
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>
select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});
You nee to change minor change in your category select
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
can also use .change() instead of .on('change').
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});
NOTE:
$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.
You are trying with $('#select') which need to be $('#category') or $('select#category').
According to your comment:
Complete solution will look like following:
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});
Complete Workout
The problem with your code is that you have an incorrect selector.
$('#select')...
should be
$('select')...
Also, this part is wrong
$('#sub' + $(this).find('option:selected').attr('id')).show();
Replace it with this
$('#sub' + $(this).val()).show();
Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.
working demo http://jsfiddle.net/FwBb2/1/
I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.
Please lemme know if I missed anything! B-)
code
$('select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).val()).show();
});
HTML
<html>
<select id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>