I've been sorting a HTML5 form with jQuery to show/hide divs based on the selected value in the select menu. However I've come across a problem where if an option is selected, then it is changed, the original selection with its div is not hidden, and the new one is added to the page, and generating more than one select menu if an user changes their choice in the select menu. I'm hoping a fresh pair of eyes would help and point out the solution to this, as I would like the divs to show/hide based on the value or if it's not selected at all.
HTML code
<div class="country">
<h1>Pick country</h1>
<select class="country_option">
<option value="england">England</option>
<option value="scotland">Scotland</option>
<option value="ireland">Ireland</option>
<option value="wales">Wales</option>
</select>
</div>
<div class="not-selected">
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="england" id="england">
<h3>Pick region in England</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="scotland" id="scotland">
<h3>Pick region in Scotland</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="ireland" id="ireland">
<h3>Pick region in Ireland</h3>
<select>
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="wales" id="wales">
<h3>Pick region in Wales</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
jQuery code
$(document).ready(function(){
$('.england, .scotland, .ireland, .wales').hide();
$('.country_option').change(function() {
$('.not-selected').hide();
$('#' + $(this).val()).show();
});
});
Alternatively, here is the CodePen link. I look forward to anyone pointing the obvious or the less obvious solution to my conundrum at the moment.
You haven't actually included any code within your change function which will hide the divs. I guess that the intention of $('.not-selected').hide();was to do this but you never apply the .not-selected class to any of the country divs.
Perhaps a simple method would be to call the hide() function on all the country divs every time a change is made.
$(document).ready(function(){
$('.country_option').change(function() {
$('.england, .scotland, .ireland, .wales').hide();
$('#' + $(this).val()).show();
});
});
Your code should be looks like this
$(document).ready(function(){
$('.england, .scotland, .ireland, .wales').hide();
$('.country_option').change(function() {
$('.england, .scotland, .ireland, .wales').hide();
$('.not-selected').hide();
$('#' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="country">
<h1>Pick country</h1>
<select class="country_option">
<option value="england">England</option>
<option value="scotland">Scotland</option>
<option value="ireland">Ireland</option>
<option value="wales">Wales</option>
</select>
</div>
<div class="not-selected">
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="england" id="england">
<h3>Pick region in England</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="scotland" id="scotland">
<h3>Pick region in Scotland</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="ireland" id="ireland">
<h3>Pick region in Ireland</h3>
<select>
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="wales" id="wales">
<h3>Pick region in Wales</h3>
<select>
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
Related
I don't know how to make next:
I want that when someone selects items from combobox, that item be shown in div.
What do I need to do?
<body>
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
<script>
</script>
</body>
You need to attach an event listener that executes when the value of the select changes:
automobili.addEventListener('change', function() {
prvi.innerHTML = automobili.selectedOptions[0].textContent
})
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
I am new to jQuery and javaScript. I am using bootstrap. I have a select menu that is visible and two additional select menus that are hidden. I would like to show the hidden select menus id the user selects "TV" from the visible select menu options. If they select any of the other value options from the visible select menu, I need to display a simple text box where they can explain. After researching online I attempted to do it using some js, but it is not working. Below is my code and here is my jsfiddle link: https://jsfiddle.net/nx6cc1Lc/
HTML:
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6 hidden">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6 hidden">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
Javascript:
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$("#heard_from_station").removeClass('hidden');
$("#heard_from_provider").removeClass('hidden');
}
else
{
$('#heard_from_station').removeClass().addClass('hidden');
$('#heard_from_provider').removeClass().addClass('hidden');
}
});
});
Update your script as given below.
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
{
$("#heard_from_station").parent().removeClass('hidden');
$("#heard_from_provider").parent().removeClass('hidden');
}
else
{
$('#heard_from_station').parent().addClass('hidden');
$('#heard_from_provider').parent().addClass('hidden');
}
});
});
As your html contains "hidden" class on the parent element ".parent()", you need to add / remove class on the parent. Alternatively, you can also give ID to the parent elements and use those ids directly in your script, without using ".parent()".
Just use show() and hide() of jquery for this.Below is the code part for your issue
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6" style="display:none">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6" style="display:none">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
<script> $(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$(".selects-5").show();
$(".selects-6").show();
}
else
{
$('.selects-5').hide();
$('.selects-6').hide();
}
});
});</script>
The problem is that the div tags that contain your secondary select menus are hidden, not the select menus themselves -- even so, your script is trying to remove the class from the select menus. So there are a number of ways you can fix this.
One way to fix this is to apply the hidden class to your select menus instead of your div tags.
<div class="selects-5 col-xs-6">
<select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station">
...
</select>
</div>
<div class="selects-6 col-xs-6">
<select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider">
...
</select>
</div>
I am trying to make a page when someone clicks on a option in the select form, another select form appears then another without having to refresh the page. I know you use AJAX for not refreshing but my code is somehow not working when tried.
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
</div>
<div id="result">
</div>
javascript(AJAX)
$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
$.ajax('AjaxLoadedContent.html')
.done(function(response){
$('#result').html(response);
});
});
});
Content thats suppose to load(Another select form)
<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
But whats wrong??
As #Goose said in the comments, instead of using an Ajax call you could hide the select boxes and show them based on the value of the shown select option, as shown below:
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="demographic">Demographic</option>
<option value="crime">Crime</option>
<option value="school">School</option>
</select>
<select id="demographic" class="toggle">
<option value="">Demographic</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
<select id="crime" class="toggle">
<option value="">Crime</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<select id="school" class="toggle">
<option value="">School</option>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
</div>
<div id="result"></div>
CSS
.toggle {
display:none;
}
JS
$('#foo').on('change', function(){
var val = $(this).val();
$('.toggle').hide();
$('#'+val).show();
});
Fiddle
If your content is fairly static, I'd use the following code that doesn't invoke additional http calls:
HTML:
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
<div id="result">
<select id="foo">
<option value="">Pick a site</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
JS:
$(function() {
$("#result").hide();
$("#foo").click(function() {
$("#result").show();
});
});
Let me know if it helps. Cheers!
Ok, so, I got a list, and I want to show some text when the user SELECTS an option from the dropdown, I figured how to make for it for one option but for some reason doesn't work in groups so well.
<select id="mySelect" name="values">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
</select>
I intend to "print" some determined text as each option is selected, thanks!
(sorry for any grammar errors, spanish speaker here)
Managed to do it:
<script type="text/javascript">
function showstuff(element){
document.getElementById("una").style.display = element=="una"?"block":"none";
document.getElementById("dos").style.display = element=="dos"?"block":"none";
document.getElementById("tres").style.display = element=="tres"?"block":"none";
document.getElementById("cuatro").style.display = element=="cuatro"?"block":"none";
document.getElementById("cinco").style.display = element=="cinco"?"block":"none";
document.getElementById("seis").style.display = element=="seis"?"block":"none";
document.getElementById("siete").style.display = element=="siete"?"block":"none";
document.getElementById("ocho").style.display = element=="ocho"?"block":"none";
document.getElementById("nueve").style.display = element=="nueve"?"block":"none";
document.getElementById("diez").style.display = element=="diez"?"block":"none";
}
</script>
<select name="type" onchange="showstuff(this.value);">
<option value="una" selected>1</option>
<option value="dos">2</option>
<option value="tres">3</option>
<option value="cuatro">4</option>
<option value="cinco">5</option>
<option value="seis">6</option>
<option value="siete">7</option>
<option value="ocho">8</option>
<option value="nueve">9</option>
<option value="diez">10</option>
</select>
<div id="uno" style="display:none;">uno</div>
<div id="dos" style="display:none;">dos</div>
<div id="tres" style="display:none;">tres</div>
<div id="cuatro" style="display:none;">cuatro</div>
<div id="cinco" style="display:none;">cinco</div>
<div id="seis" style="display:none;">seis</div>
<div id="siete" style="display:none;">siete</div>
<div id="ocho" style="display:none;">ocho</div>
<div id="nueve" style="display:none;">nueve</div>
<div id="diez" style="display:none;">diez</div>
Thanks every one :)