I'm having problems with some jQuery that needs to display the content of a div depending on the options selected in a drop down
The drop down needs to pass numerical values into a calculator in order to work out a loan amount so when I added numerical values for the option value and corresponding div id the code doesnt work. If I change the the value and id to a word it works fine.
Is there a work around for this to get it working using the numerical values.
<select name="apr" id="apr" class="loan-calculator__input" >
<option value="">Select</option>
<option value="4.7" class="good">Good</option>
<option value="14.9" class="fair">Fair</option>
<option value="29.9" class="poor">Poor</option>
</select>
</div>
<div id="4.7" style="display:none;" class="rating" ><p>Good - </p>
</div>
<div id="14.9" style="display:none;"class="rating" ><p>Fair</p>
</div>
<div id="29.9" style="display:none;" class="rating"><p>Poor </p>
</div>
(function($) {
$(document).ready(function() {
$('#apr').change(function(){
$('.rating').hide();
$('#' + $(this).val()).show();
});
});
})(jQuery);
I've created a jsfiddle to show the code - http://jsfiddle.net/nineseven/W37np/
use the data attribute because you cannot use a number for an object id
<div data-selectvalue="4.7"/>
$("[data-selectvalue='"+$(this).val()+"']").show()
It is not going to work when you use decimal ID's.
I probably wouldn't go with this workflow for displaying content.
But anyway, here you have a fiddle based on string id's:
http://jsfiddle.net/W37np/11/
(function($) {
$(document).ready(function() {
$('#apr').change(function(){
$('.rating').hide();
$('#' + $( "#apr option:selected" ).attr("value")).show();
});
});
})(jQuery);
This is not working because its been taken as an expression.. don't use numbers
Error: Syntax error, unrecognized expression: #14.9'
check the error console of the browser
I think you need to grab the value of the selected option instead. The others are right too - your ids are not suitable. In the demo I've replaced them with dashes.
$('#' + $(this).find('option:selected').val()).show();
Demo
if want those value to those options value and you can change the div's id to different id say the class the option has then you can extract the class as follows and display it
$('#' + $( "#apr option:selected").attr('class')).show();
fiddle demo
$(document).ready(function () {
$('#apr').change(function () {
$('.rating').hide();
var prefix = "div-";
$('#' + prefix + $("#apr option:selected").attr("value")).show();
});
});
<select name="apr" id="apr" class="loan-calculator__input" >
<option value="-1">Select</option>
<option value="123" class="good">Good</option>
<option value="456" class="fair">Fair</option>
<option value="789" class="poor">Poor</option>
</select>
<div id="div-123" style="display:none;" class="rating" ><p>Good - You are likely to have stable address and job history be on the electoral role and have plenty of good credit and no missed payments</p>
</div>
<div id="div-456" style="display:none;"class="rating" ><p>years carry a higher level of debt and perhaps missed the odd payment</p>
</div>
<div id="div-789" style="display:none;" class="rating"><p>Poor – May have missed made late payments or have CCJs and have frequently moved jobs or not be on the electoral role </p>
</div>
Since Id does not accept numeric value. You can use a prefix on div tag.
Related
I'm looking for a way to find out which field is selected with jQuery. I build a function, but it doesn't work.
HTML example
<select id="bewerbungID">
<option value="1" name="selectName">test1</option>
<option value="2" name="selectName">test2</option>
<option value="3" name="selectName">test3</option>
</select>
JS function
$('#bewerbungID select').on('change', function() {
alert($('option[name=selectName]:checked', '#bewerbsungID').val());
});
Tested in jsfiddle open link
Treat select as an input field such as text. Then it has to have a value selected - show new value whenever it changes. You logic was right but jQuery selectors got a bit confusing.
Simplified your code a bit:
$('#bewerbungID').on('change', function() {
alert($('#bewerbungID').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bewerbungID">
<option value="1" name="selectName">test1</option>
<option value="2" name="selectName">test2</option>
<option value="3" name="selectName">test3</option>
</select>
The issue you are having is that you are not using the selector properly.
Basic Explanation:
The selector is everything you find within the parenthesis here: $('...'). When you use # in front of the word, that means you are selecting an element that has an id of whatever is to the right of #. In your case, ... is equal to #bewerbungID so the proper code should be as follows:
$('#bewerbungID').on('change', function() {
alert($('#bewerbungID').val());
});
$('#bewerbungID').on('change', function() {
alert($('#bewerbsungID option:selected').val());
});
It should do the trick
I'm working on an HTML view for iAd Producer. I'm trying to add a list of sentences which have alternative words students can choose and to save those values to localStorage as they change and repopulate the selects with those values when the page is revisited.
I'm adapting some code I wrote which works fine to save multiple input boxes on a page. But I have strange behaviour when trying to use it with multiple selects. Basically, no matter which order the answers are completed in, only the last chosen value is being stored. When the page is revisited, the code attempts to put that value in each select. This, of course, fails for the two selects which do not have corresponding values.
I cannot see why this is happening and hope someone can spot the obvious. Thanks.
<div>
<script type="text/javascript">
var uniqueId = "FC2-U2-A-P29";
$(document).ready(function () {
function onStartup() {
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) {
$(this).val(localStorage[$(this).attr("value")+uniqueId]);
}
});
}
onStartup();
});
$('.drop').change(function () {
localStorage[$(this).attr("value")+uniqueId] = $(this).val();
});
</script>
<form>
<label class="number">1.</label>
<label class="text">Breakfast is the </label>
<select name="select1" class="drop">
<option value="blank">Choose a word</option>
<option value="one1">one</option>
<option value="first1">first</option>
</select>
<label class="text"> meal of the day.</label>
<br>
<label class="number">2.</label>
<label class="text">I always eat </label>
<select name="select2" class="drop">
<option value="blank">Choose a word</option>
<option value="three2">three</option>
<option value="third2">third</option>
</select>
<label class="text"> meals a day.</label>
<br>
<label class="number">3.</label>
<label name="select3" class="text">My football team is in</label>
<select class="drop">
<option value="blank">Choose a word</option>
<option value="two3">two</option>
<option value="second3">second</option>
</select>
<label class="text"> place in the league.</label>
<br>
<button class="clearButton" onclick="clearAnswers()">Clear </button>
<script type="text/javascript">
function clearAnswers() {
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) {
localStorage.removeItem($(this).attr("value")+uniqueId);
$(this).val("blank");
}
location.reload();
});
}
</script>
</form>
</div>
The probable reason for which this code fails in select is because of the following :
$.each( $("select"), function() {
if (localStorage[$(this).attr("value")+uniqueId]) { //select doesn't have any attribute value.
$(this).val(localStorage[$(this).attr("value")+uniqueId]);
}
});
Select tag doesn't have any value attribute. I think .val() is what you need here. If you look at the code, you are basically iterating on select tag and checking value attribute(which doesn't exist) of select. Try changing it to .val() and then try.
To save and load stuff from localstorage use:
localStorage.setItem(<key>, <value>);
and
localStorage.getItem(<key>);
There are multiple problems with your code.
The first one is that you should use .val() instead of .attr('value').
The second one is that the code to add the values in localStorage is executed before the DOM is created fully, so the selects dont exist yet. To overcome this you need to bind the change event on document.ready ( aka $(function() { }); ).
I've made a pastebin with the modified code: http://jsbin.com/jubijuyatu/2/
Your selector is invalid.
Change $(this).attr("value")+uniqueId with $("option:selected",this ).text()+uniqueId; in all occurrences.
I've searched and searched but my jquery/js skills are so poor I can't get it to work.
What I desire is for each option in the selection a different is displayed for further information.
<label class="checklabel">Is it possible to recieve mail?</label>
<select class="mailoption">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<div class="yesmail">Yes can recieve mail.</div>
<div class="nomail">No can't recieve mail.</div>
When the value is 1 it should display 'yesmail' and option 2 should display 'nomail'. I've tried several lines of coding gathered from stackoverflow but I all had to adjust it which I can't do to this degree.
Can anyone help me out here?
Thanks,
I guess you have had problems with selecting the DOM elements. As #Teemu points out you might want to use ids instead. You can use $(".foobar") to select the elements with the class foobar and $("#foobar") to select the element with id foobar.
$(document).ready(function() {
$(".mailoption").change(function() {
if($(this).val() == 1) {
$(".yesmail").removeClass('hidden');
$(".nomail").addClass('hidden');
} else {
$(".yesmail").addClass('hidden');
$(".nomail").removeClass('hidden');
}
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checklabel">Is it possible to recieve mail?</label>
<select class="mailoption">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<div class="yesmail">Yes can recieve mail.</div>
<div class="nomail hidden">No can't recieve mail.</div>
Please excuse my complete lack of knowledge I am very new to all this. I have found some code on here that does kind of what I want so am trying to adapt it. Basically I need to show a character on the screen and then change that character using a drop down list
Heres the HTML
<div style = "position: absolute; left: 320; top: 700;" class = "dropdown-menu- portfolio" >
<select id="category-navbar" name="category-navbar" style="width: 131px;">
<option value="1">motif 1</option>
<option value="2">motif 2</option>
<option value="3">motif 3</option>
</select>
And the Java script
<script>
$(".category-navbar value value").click(function() {
// Modifying the label
$('div.dropdown-menu-portfolio label').text($(this).text());
// Removing the class 'select' to the item previously selected
$('option.select').removeClass('select');
// Giving the class 'select' to the item currently selected
$(this).parent().addClass('select');
});
</script>
I have been struggling for a couple of weeks with this on and off and really want to get it cracked. Any help would be massively appreciated!
I'm not 100% sure, but i think this is what you're looking for:
$(document.body).on('change', 'select#category-navbar', function() {
$('.selected-value').text($(this).val());
});
So when you change an option in the dropdown, it will write the selected option value inside the .selected-value div. Demo: http://jsfiddle.net/qp2b9Lof/
You have some errors in your code for example with this:
$(".category-navbar value value").click(function() {
you don't select anything it must be:
$("#category-navbar").change(function() {
Notice the "#" sign, it selects by ID and second you must use change event
Check JSFiddle for full code
http://jsfiddle.net/qm0msyhf/
Try this
<div class = "dropdown-menu-portfolio" ></div>
<select id="category-navbar" name="category-navbar" style="width: 131px;">
<option value="1">motif 1</option>
<option value="2">motif 2</option>
<option value="3">motif 3</option>
</select>
javascript:
$("#category-navbar").change(function(){
$(".dropdown-menu-portfolio").html($(this).val());
});
click here to see demo - http://jsfiddle.net/1wrt94fc/
I am after a country select box with a text box below for state and provinces of countries. however, if US or Canada is chosen in the select box, the text box is replaced with a new corresponding select box with either US or Canada state or province options. (depending on the choice)
Basically, If United States is chosen, show a new select with the states...
If Canada is chosen, show a new select with Canadian Provinces...
If any other country is chosen, just show the text box where they can enter their area.
After bouncing around the site, I have came reasonably close with the code shown below. The Divs display properly, however if I put in a select box in either the United states div or the Canada Div, it breaks it.
So, for this display propose, I just left text in this example so as to have a working example. Any help in finding out why it breaks with a select box inside the US and Canada divs would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Selectbox</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="ca"){
$(".box").hide();
$(".ca").show();
}
else if ($(this).attr("value")=="us"){
$(".box").hide();
$(".us").show();
}
else if(($(this).attr("value")!="us") || ($(this).attr("value")=="ca")){
$(".box").hide();
$(".any").show();
}
});
}).change();
});
</script>
<div>
<select>
<option>choose country</option>
<option value="ca">Canada</option>
<option value="us">USA</option>
<option value="mx">Mexico</option>
<option value="Albania">Albania</option>
<option value="Aruba">Aruba</option>
</select>
</div>
<div style="display:none;" class="ca box"><strong>Canada Province Select Box...</strong></div>
<div style="display:none;" class="us box"><strong>United States State Select Box</strong></div>
<div style="display:none;" class="any box" >Enter your Region:<br><input name="state" type="text"></div>
</body>
</html>
It's because your javascript is targeting every single select element on the page.
Use a more unique selector
<select id="country">
<option>cho`enter code here`ose country</option>
<option value="ca">Canada</option>
<option value="us">USA</option>
<option value="mx">Mexico</option>
<option value="Albania">Albania</option>
<option value="Aruba">Aruba</option>
</select>
and target that
$("#country").change(function(){
$(".box").hide();
$("." + this.value).toggle(['ca','us'].indexOf(this.value)!=-1);
$(".any").toggle(['ca','us'].indexOf(this.value)==-1);
});
and yes, I just replaced your event handler with two lines !
FIDDLE
It's hard to tell without the exact code you were using that broke, but my guess would be because your select events would be hooked up with it, so basically you'd wind up running the change on itself as well, causing unexpected behavior.
If you were to throw the non-working version in to JSFiddle, it'd be easier to play around with and give a more exact answer.
i made a fiddle that fixes your code http://jsfiddle.net/DP2n2/1/
first you need to have .change() only 1 time
then you don't need each() on $( "select option:selected")
$( "select option:selected").val() will retrieve the value
and after show() the div with that value like this
var selectedCountry = $( "select option:selected").val();
$('.'+selectedCountry).show();
EDIT: updated fiddle http://jsfiddle.net/DP2n2/2/
fixed bug . sry ..
$('.box').hide(); // outside if()
Another way to do it:
$(document).ready(function(){
$('select').on('change', function(){
var with_select = ['ca', 'us']; // easy to manage values that
// require selects
var val = $(this).val(); // this kind of things makes it more
// easy
$('.box').hide(); // hide all boxes. the code runs fast
// enough
for( var i in with_select ){
if( with_select[i] == val ){ // we check through the array **if** the
$('.' + val).show(); // value matches. in that case we show
return false; // the required select and return false
} // to exit of method
}
$('.any').show(); // **else** we show the text input
});
});
http://jsfiddle.net/UBf8e/