Load data into a div when a select option is chosen - javascript

Hi I have recently been playing around with jquery. I originally had three buttons with names of cities on and using the simple jquery .load function to enter the data into another separate div.
<script>
$(document).ready(function(){
$(".London").click(function(){
$("#div1 h2").load("London.txt");
});
$(".NewYork").click(function(){
$("#div1 h2").load("NewYork.txt");
});
$(".Shanghai").click(function(){
$("#div1 h2").load("Shanghai.txt");
});
});
</script>
I now want to change this and use a select box to do the same thing however when trying this it doesn't work.
<select class="Select">
<option value="" disabled selected hidden>Select a City</option>
<option value="NewYork" class="NewYork">New York</option>
<option value="Shanghai" class="Shanghai">Shanghai</option>
<option value="London" class="London">London</option>
</select>

Use change event of <select> instead
$(function() {
var h2 = $('#div1').find('h2');
$('.Select').on('change', function(e) {
var city = $(this).val();
h2.text('City changed to:' + city);
var url = city + '.txt';
h2.load(url, function(resp, status, req) {
if ('error' === status) {
h2.text('Failed to load url: ' + url);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="Select">
<option value="" disabled='' selected=''>Select a City</option>
<option value="NewYork">New York</option>
<option value="Shanghai">Shanghai</option>
<option value="London">London</option>
</select>
<div id="div1">
<h2>Please select city from top</h2>
</div>

You will have to use change event to of select. So try this
<script>
$(document).ready(function(){
$(".Select").change(function(){
if($(this).val() === "London") { //load London.txt }
else if($(this).val() === "NewYork") { //load NewYork.txt }
else if($(this).val() === "Shanghai") { //load Shanghai.txt }
});
});
</script>

What you're doing with the selectors is wrong. <option> elements give their value attribute to the <select> when they are selected, so if you use
$(".Select").value
after you select an option, it will take the value of the selected option. Here's how I fixed your code:
$(".Select").on("change", function(){
if ($(".Select").value == "London") {
$("#div1 h2").load("London.txt");
} else if ($(".Select").value == "NewYork") {
$("#div1 h2").load("NewYork.txt");
} else if ($(".Select").value == "Shanghai") {
$("#div1 h2").load("Shanghai.txt");
}
});

Related

I Retained Select Option Value on First Dropdown but not Second or Third

I have 3 form select drop downs and have successfully retained the first select value after page loads, but am unable to get the second and third select values to be retained.
I'm using JavaScript and Jquery only for this.
I've tried over and over and finally got to bring my code here to see if someone more advanced can point out what I'm not doing correctly.
<form id="form">
<select id="select0" type="text">
<option type="text" value="" >make</option>
<option type="text" value="ford" >ford</option>
</select>
<select id="select1" type="text">
<option type="text" value="" >model</option>
<option type="text" value="mustang" >mustang</option>
</select>
<select id="select2" type="text">
<option type="text" value="">year</option>
<option type="text" value="1967" >1967</option>
</select>
<input type="submit" value="go">
</form>the
// JavaScript
var storeMake = sessionStorage.getItem("themake");
var storeModel = sessionStorage.getItem("themodel");
var storeYear = sessionStorage.getItem("theyear");
var make = $("#form #select0");
var model = $("#form #select1");
var year = $("#form #select2");
if(storeMake != undefined || storeMake != null){
make.find(":selected").removeAttr("selected");
make.find("option").each(function () {
if ($(this).val() == storeMake) {
$(this).attr("selected", true);
}
});
}
if(storeModel != undefined || storeModel != null){
model.find(":selected").removeAttr("selected");
model.find("option").each(function () {
if ($(this).val() == storeModel) {
$(this).attr("selected", true);
}
});
}
if(storeYear != undefined || storeYear != null){
year.find(":selected").removeAttr("selected");
year.find("option").each(function () {
if ($(this).val() == storeYear) {
$(this).attr("selected", true);
}
});
}
make.change(function () {
sessionStorage.setItem("themake", make.val());
});
model.change(function () {
sessionStorage.setItem("themodel", model.val());
});
year.change(function () {
sessionStorage.setItem("theyear", year.val());
});
The jQuery .val() method can be used to set the value of a select. This will replace each if statement.
Try the code below. The snippet will not work in Stack Overflow because sessionStorage is disabled.
var storeMake = sessionStorage.getItem("themake"),
storeModel = sessionStorage.getItem("themodel"),
storeYear = sessionStorage.getItem("theyear");
$("#select0").val(storeMake).change(function () {
sessionStorage.setItem("themake", $(this).val());
});
$("#select1").val(storeModel).change(function () {
sessionStorage.setItem("themodel", $(this).val());
});
$("#select2").val(storeYear).change(function () {
sessionStorage.setItem("theyear", $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<select id="select0">
<option value="">make</option>
<option value="ford">ford</option>
</select>
<select id="select1">
<option value="">model</option>
<option value="mustang">mustang</option>
</select>
<select id="select2">
<option value="">year</option>
<option value="1967">1967</option>
</select>
<input type="submit" value="go">
</form>
A few added notes:
The type attribute is not needed on select or option elements.
$("#form #select0") can updated to $("#select0") since the id will be unique. Same with select1 and select2.

I need to trigger change function whenever a text in dropdown list is selected

My jquery code is having two dropdown boxes,one containing country and the other one holds currency.so here i want that whenever a country is selected in the box it will trigger a change function that will perform some comparison using if-else and will select the currency in the other dropdown and leaving it as 'disabled' to true.Below is my code for the same:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".select").change(function () {
debugger;
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').attr("selected", true);
document.getElementById('disable').disabled = true;
}
else
{
$('select[name="currency"]').find('option[value="2"]').attr("selected", true);
document.getElementById('disable').disabled = true;
}
});
});
//$(function () {
// var select = $('select.select');
// select.change(function () {
// select.not(this).val(this.value);
// document.getElementById("disable").disabled = true;
// });
//});
</script>
</head>
<body>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency" id="disable" class="select">
<option value="">Select</option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
<br><br>
</form>
</body>
</html>
but now the problem is when i select india it shows IR which is ok and then when i select America,it shows Doller and finally the problem comes now,when i again change the country back to india the change function is not called at all and dollar gets remain selected and disabled.Fix this it would be a great help!
Use .prop instead of .attr
With .attr, both the options have selected attribute set hence browser fail to make out which option to be set as selected.
From docs, To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. (.attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.)
$(document).ready(function() {
$(".select").change(function() {
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').prop("selected", true);
} else {
$('select[name="currency"]').find('option[value="2"]').prop("selected", true);
}
document.getElementById('disable').disabled = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency" id="disable" class="select">
<option value="">Select</option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
<br>
<br>
</form>
Since the values on both select are the same. You can easily set the value of the second select based on the first.
$(function() {
$('.select').on('change',function() {
var val = $(this).find(':selected').val();
$('[name=currency]').val( val ).attr('disabled',true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="country" id="country" class="select">
<option value="">Select</option>
<option value="1">india</option>
<option value="2">America</option>
</select>
<select name="currency">
<option value=""> </option>
<option value="1">INR</option>
<option value="2">DOLLAR</option>
</select>
</form>
To complete the above answer you can use the "$" jquery selector instead of document.getElementById
Plus note you can use .prop('disabled', false);
too, like this :
$(document).ready(function() {
$(".select").change(function() {
var c = $('#country :selected').text();
if (c == 'india') {
$('select[name="currency"]').find('option[value="1"]').prop("selected", true);
} else {
$('select[name="currency"]').find('option[value="2"]').prop("selected", true);
}
$(#'disable').prop('disabled', true);
});
});

Display image with select list APEX

I have two items: a Select List and a Display Image. The Select List has three values for the user to choose from. If the user selects on of the values then the Image View will show a related image with the selected value and if the selected value of the Select List will switch also change the picture.
I tried putting the script in the section: JavaScript -> "Function and Global Variable Declaration" of the page, but not run.
<script language="JavaScript" type="text/javascript">
function setValueDisplayImage(){
if ($("#SELECT_LIST").val() == 1) {
$("#DISPLAY_IMAGE").val('http://www.some.com/img1.jpg');
} else if ($("#SELECT_LIST").val() == 2) {
$("#DISPLAY_IMAGE").val('https://www.some.com/img2.jpg');
} else if ($("#SELECT_LIST").val() == 3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img3.jpg');
}
}</script>
Use jquery on() like,
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val==1 || val==2 || val==3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
}
});
});
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val==1 || val==2 || val==3){
$("#DISPLAY_IMAGE").val('http://www.some.com/img'+val+'.jpg');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
<option value="1">First Image</option>
<option value="2">Second Image</option>
<option value="3">Third Image</option>
</select>
<br/>
<input id="DISPLAY_IMAGE" style="width:250px;"/>
And if your DISPLAY_IMAGE element is an img then your need to use attr() to change the image src like,
$(function(){
$("#SELECT_LIST").on('change', function(){
var val=this.value;
if(val){
$("#DISPLAY_IMAGE").attr('src','http://placehold.it/250x'+val);
}
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECT_LIST">
<option value="">Select</option>
<option value="100">First Image</option>
<option value="150">Second Image</option>
<option value="200">Third Image</option>
</select>
<br/>
<img id="DISPLAY_IMAGE"/>

How to get select array empty

The name of my select option property is populated dynamically.
On submit my form I need to know if all my forams selects filled ...
How can I do this?
I would also like to take the mouse cursor to the select that was not filled.
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#teste").click(function () {
a = $("select[name='sel[]'] option:selected").length;
alert(a);
});
});
</script>
<title>
</title>
</head>
<form>
<select name="sel[0]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
... Many others
<input type="button" id="teste" value="TESTAR">
</form>
</html>
Give your default option a value of -1 and provide a common class name for these options(Which is efficient that attribute starts with selector).
Try:
HTML:
<form>
<select name="sel[0]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<input type="button" id="teste" value="TESTAR">
JS:
$(document).ready(function () {
$("#teste").click(function () {
$(".sel").each(function () {
if (this.value == -1) { //If you are not providing value check for this.selectedIndex == 0
$(this).focus(); //set the focus
return false; //and break out of the loop
}
});
});
});
Fiddle
You have to set the variable like this var a;.
There is no element with select[name='sel[]'], you have a number inside of it, you could use name*= or name^= to say name contains or name starts with sel respectively
JSFIDDLE DEMO
$("#teste").click(function () {
var a = $("select[name^='sel'] option:selected");
var count = 0;
$.each(a, function () {
if ($(this).text().length) {
count++;
}
});
alert(count);
});
Select acts like the usual input when submitting form. So you can find selects with empty value:
$("select[value=]").first().focus()
Or iterate over all form elements, checking its value and type.
http://jsbin.com/UduNaGOh/1/edit?html,output
$(document).ready(function () {
$("#teste").click(function () {
var test = true;
$("#myform select").each(function(){
var select = $(this);
if(select.val() == 'none') {
select.addClass('fail');
select.focus();
test = false;
} else {
select.removeClass('fail');
}
});
if(test){
alert('well done');
$("#myform select").removeClass('fail');
// do your send stuff ...
}
});
});
I'm changing the class to style the empty selects.
So here is the css:
#myform > select.fail { background: red }
If you just need the number of empty selects you can use:
$('select:has(option[value="none"]:selected)').length

div to show select menu value with jquery

i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2
$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/
Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>
Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps
Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});
$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);

Categories