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"/>
Related
Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});
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);
});
});
I am using counties.js form here and using select-2 plugin for drop down.
code for selecting country from the country drop down
<select class="select2 dep" name="country" id="country_list">
<optgroup label="Country">
<option value="">Select Country</option>
<script src="<?=base_url()?>assets/js/countries_states.js"></script>
<script language="javascript">
populateCountries("country_list");
var country_select = document.getElementsByName('country');
for(var m=0;m<country_select[0].options.length;m++)
{
if(country_select[0].options[m].value == '<?=$bhandar_details[0]['country']?>')
{
country_select[0].options[m].setAttribute("selected","true");
}
}
</script>
</optgroup>
</select>
and the code for default selection of states is as follows
<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
<option value="">Select State</option>
<script language="javascript">
populateStates("country_list", "state_list");
var state_select = document.getElementsByName('state');
for(var m=0;m<state_select[0].options.length;m++)
{
if(state_select[0].options[m].value == '<?=$bhandar_details[0]['state']?>')
{
state_select[0].options[m].setAttribute("selected","true");
}
}
</script>
</optgroup>
when the country is changed its respective states should change for that following script is written
<script type="text/javascript">
$( "#country_list" ).change(function() {
populateStates("country_list", "state_list");
});
</script>
everything works well and fine and when country is changed its respective states are populated in the state drop down. but the display text in state dropdown remains the same even though that state doesnot exists, until not changed manually to some other text.
Ideally as soon as country is changed the state list should change to default selection.
thank you all in advance. waiting for response...
I think what you do to the main select (behind the graphical select2) does not affect the select2 user interface.
In fact, you have to change the value of your select using the plugin itself.
Use this:
$("#state_list").select2().val(0); // any value you like
Working code:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
<script src="js/countries_states.js"></script>
<link href="css/select2.css" rel="stylesheet"/>
<select class="select2 dep" name="country" id="country_list" style="width: 260px;">
<optgroup label="Country">
<option value="">Select Country</option>
</optgroup>
</select>
<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
<option value="">Select State</option>
</optgroup>
<script type="text/javascript">
$( "#country_list" ).change(function() {
populateStates("country_list", "state_list");
$("#state_list").select2().val(0); //----- added this code
});
$(document).ready(function() {
populateCountries("country_list", "state_list");
$("#country_list").select2();
$("#state_list").select2();
});
</script>
Try this this can help you by just doing a small effort
https://rubygems.org/gems/country_state_select
I have three dropdowns
First dropdown options are
option1
option2
2nd and third dropdowns are
optionA
OptionB
When I select option2 in first dropdown
I should remove optionA from both dropdowns.
When I select option1, my both dropdowns should repopulate with original values.
I am using the following code to remove from one dropdown only
Can anybody point me how to do two dropdowns at same time please.
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function()
{
var sites='#firstDDId';
$('#firstDDId').change(function()
{
if($(sites).val()=='Option1' )
{
alert(" Please note, optionA will be removed");
$("#secondDDId option[value='OptionA']").remove();
}
else
{
var exists = false;
$('#SecondDDId option').each(function()
{
if (this.value == 'OptionA')
{
exists = true;
return false;
}
}
);
if (exists==false)
{
$("#SecondDDId").append('<option value="OptionA">OptionA</option>');
}
}
});
});
</script>
Store your options first in an array and then you can repopulate your select options every time you need.
Change $("#secondDDId option[value='OptionA']").remove();
into $("option[value='OptionA']").remove();
This will remove all the options with value OptionA.
if ($("#SecondDDId option[value='OptionA']").length == 0)
$("#SecondDDId").append('OptionA');
This will re-add the option.
To target the second and third drop down at the same time, you could use $("select[id$='DDId'] option[value='OptionA']").
You were on the right track there. You were just missing the dynamic part. I changed some variables and id's for better readability too.
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<select id="control-ddl">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="child-ddl-1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-4">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<script>
$(document).ready(function() {
$("#control-ddl").change(function() {
// Array of child select id's; only these get the "A" option
// stripped and readded when control-ddl changes
var ddlIds = [ "#child-ddl-1", "#child-ddl-2", "#child-ddl-3" ];
$.each(ddlIds, function(idx, ddlId) {
if($("#control-ddl").val()=="2") {
$(ddlId + " option[value='A']").remove();
} else {
var exists = false;
$(ddlId + " > option").each(function() {
if (this.value == "A") {
exists = true;
return;
}
});
if (!exists) {
$(ddlId).append("<option value='A'>A</option>");
}
}
});
});
});
</script>
</body>
</html>
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()
)
}
);