Show divs based on dropdown - Script not working - javascript

I'm trying to show div's based on dropdown selection using the following script.
It works perfectly on a simple page without any thing in it; but when I put it in the page that I'm developing, it messes up the entire page, making it black and at the end of the URL I get this ...../myPage.html#someIdInThePage .
JS:
<script type="text/javascript">
$(document).ready(function () {
function showTheTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change(function () {
showTheTab($(this).val());
});
showTheTab($('#dropdown').val());
});
</script>
HTML:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" selected="selected">Pubs</option>
<option value="Councils">Councils</option>
<option value="Property">Property</option>
<option value="Various">Various</option>
<option value="Universitys">Universitys</option>
</select>
</p>
</form>
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>

This line: $('div').not(name).hide(); will hide every div on your page apart from the selected div. You're going to need a more specific selector to do the hiding
Example
Javascript:
$(document).ready(function () {
function showTheTab( name )
{
name = '#' + name;
$('div.Tabs > div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTheTab( $( this ).val() );
});
showTheTab( $('#dropdown').val() );
});
Html:
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pubs" selected="selected">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
<div class="Tabs">
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>
</div>

Related

Show hide multiple divs based on select value

Looking for some jQuery to help hide and reveal content in a simple form I'm creating.
Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).
I think data attributes would be a good route to go down but a little unsure of where to start.
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I highly recommend reading Decoupling Your HTML, CSS, and JavaScript. You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.
$(document).ready(()=>{
$('.js-revealer').on('change', function(){
var $select = $(this);
var $selected = $select.find('option:selected');
var hideSelector = $selected.data('r-hide-target');
var showSelector = $selected.data('r-show-target');
$(hideSelector).addClass('is-hidden');
$(showSelector).removeClass('is-hidden');
});
});
.is-hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box" class="js-revealer">
<option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
<option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
<option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
<option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
</select>
</div>
<div data-response="op1" class="opt-1 is-hidden">
This is content for option 1.
</div>
<div data-response="op2" class="opt-2 is-hidden">
This is content for option 2.
</div>
<div data-response="op3" class="opt-3 is-hidden">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="opt-other is-hidden">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:
$('#select-box').change(function(){
var selectVal = $(this).val();
$('.content, #other-questions').hide();
$('.content[data-response="op' + selectVal + '"], #other-questions').show();
});
.content, #other-questions {
display: none;
}
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="content" data-response="op1">
This is content for option 1.
</div>
<div class="content" data-response="op2">
This is content for option 2.
</div>
<div class="content" data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I've updated my answer to include classes which are better for selecting elements than data attributes.
I would suggest using classes for this, there is no need for data attributes.
$(function() {
$('#select-box').change(function(){
if($('#select-box').val() == '1') {
$('.response1').show();
$('.response2').hide();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '2') {
$('.response1').hide();
$('.response2').show();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '3') {
$('.response1').hide();
$('.response2').hide();
$('.response3').show();
$('#content').show();
}
});
});
.response1, .response2, .response3 {
display: none;
}
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class='response1' data-response="op1">
This is content for option 1.
</div>
<div class='response2' data-response="op2">
This is content for option 2.
</div>
<div class='response3' data-response="op3">
This is content for option 3.
</div>
</div>
<div id='content' data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide
to hide the element and show to show the element.
$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
var value = $(this).val();
if(value !="" && value<=3 && value !=0){
console.clear();// to clear older logs.
console.log('Selected value'+$(this).val());
$('[data-response^=op]').attr('class',"hide");//On change hide all div's
var selector = "op"+value;
$(document).find("[data-response='"+selector+"']").attr('class',"show");
$("#other-questions").attr('class',"show");//Show matching div.
}else{
$("#other-questions").attr('class',"hide");
$('[data-response^=op]').attr('class',"hide");
}
})
.hide{
display:none;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="hide">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>

Select Menu onChange DIV element with Javascript

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

Jquery dynamic hide and show for drop down menu

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>

Jquery/Js: Hide/Show Divs based on select box option values

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>​

on change the select value, display certain div content

Here is the HTML code
<select id="language">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
Every div related to one of the options in the select, I want replace div when changing the select option.
Here's what I've tried:
$(document).ready(
function() {
$("#language").change(
function() {
$("#" + this.value).show().siblings().hide();
});
$("#language").change();
}
<select id="language">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
</div>
<script>
$("#language").on("change", function() {
id = "related_" + $(this).val() + "_content";
$("#" + id).show().siblings().hide()
})
</script>
$('[id^="related"]').not(':first').hide();
$("#language").on('change', function() {
$("#related_"+this.value+"_content").show().siblings('[id^="related"]').hide();
});
FIDDLE
<select id="language" onchange:"javascript:handle_language(this)">
<option value="en">english</option>
<option value="fr">french</option>
<option value="gr">german</option>
</select>
<script>
function handle_language(what){
document.getElementById('related_en_content').style.visibility='hidden';
document.getElementById('related_fr_content').style.visibility='hidden';
document.getElementById('related_gr_content').style.visibility='hidden';
if(what.value=="en"){
document.getElementById('related_en_content').style.visibility='visible';
}
if(what.value=="fr"){
document.getElementById('related_fr_content').style.visibility='visible';
}
if(what.value=="gr"){
document.getElementById('related_gr_content').style.visibility='visible';
}
}
</script>
<div id="related_en_content">
english text
</div>
<div id="related_fr_content">
french text
</div>
<div id="related_gr_content">
german text
</div>
$(document).ready(function(){
$("#language").change(function(e){
$('[id^="related"]')
.not($('#related_'+$(this).val()+'_content'))
.hide();
$('#related_'+$(this).val()+'_content').show()
});
});​
Example.

Categories