onchange - the dropdown selected using jquery - javascript

i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?
$("#myddl").change(function()
{
//update all the dropdown list...
});
http://jsfiddle.net/abuhamzah/4QvfP/
Header:
<br />
<select id="myddl" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<p>Detail</p>
<br />
<select id="Select1" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select2" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select3" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select4" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select5" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>


Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.
http://jsfiddle.net/qMXSR/2/
$("#myddl").change(function()
{
$('.detail').find('select').val($(this).val());
});​


Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.
​$("#myddl").on("change", function(o){
$("select[id^=Select]").val(o.target.value);
});​​​​​​​​​​


This code will do it:
$(document).ready(function()
{
$("#myddl").live('change', function()
{
$("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
});
});
The updated JS Fiddle is here: http://jsfiddle.net/leniel/4QvfP/7/


​$(function(){
$('#myddl').change(function(){
var value = $(this).val();
$('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
});
})​


In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.

Related

How to get pre selected value in dropdown jquery?

Im populating the dropdown with the selected value like this,
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option selected="3">Three</option>
</select>
To access the selected option im using:
var myOption = $('#myselect option:selected').val()
Here myOption returns "Three" as the value. How do i get the value i.e "3" and not the text?

it should be like
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected >Three</option>
</select>

you write selected=3 its not correct attribute check below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
<script>
var myOption = $('#myselect option:selected').val();
alert(myOption);
</script>

You have to set value="3" and add additional property selected(just the tag as it is boolean in nature)
Try the below html code:
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
$('#myselect option:selected').val() should give you "3"

Select relevant option of multiple select based on selected option of special select

<select >
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
I have multiple select box like that for example in first select box 1 is already selected so if i change option value 1 to 2 then change the selected value to 1 in which select box 2 is already selected
i am doing like
function getval(sff,sel){
var selectval=[];
$("select > option:selected").each(function(e) {
if(sel.value==this.value){
alert(this.value);
$(this).find('option[value="2"]').prop('selected', true);
}
});
}

You need to select target option of select tag in change event listener of main select. So select relevant option of selects and add selected attribute to them.
$(".main").change(function(e) {
$(this).siblings("select").find("option[value='"+$(this).val()+"']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

jQuery set all select inputs to certain value [duplicate]

This question already has answers here:
jQuery Loop through selects and set selected option
(3 answers)
Closed 6 years ago.
I'd like to loop through all of the select inputs on a page and if the selected value is not a certain option then set that value to selected
I have some selects (notice in select1, option 2 is selected)
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
The idea here would be to have a checkbox that when it's checked set select2 and select3 to have option 2 selected as they don't have that option already selected and append a string to the value so I know they've been updated e.g '-updated'
I'm looping through them like so, but I can't figure out how to set the selected property to option '2' if it isn't already selected and then append '-updated' to the value
$('select').each(function() {
var selected = $(this).find(":selected");
if (selected.val() != 2) {
// set option 2 as selected
// append '-updated' to value
}
}
Fiddle https://jsfiddle.net/69zzr6xa/6/

var selected = 0;
$('select').each(function(i) {
var obj = $(this);
if(i == 0) selected = $(this).find(":selected");
if (obj.val() != 2) {
if (obj.val().indexOf('-updated') < 0) {
obj.val(selected.val());
obj.find(":selected").text(selected.text()+" -updated");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<label>Set to two
<input type="checkbox" id="set_to_two" name="set_to_two">
</label>

Check below example.
Loop through the select elements
Check if the value is already selected, if not set the value.
Also added the code to change other dropdown's, when any one is changed
$(function() {
var setValue = "2";
/* Initialize the select's to base value */
$('select').each(function() {
$(this).val(setValue);
});
/* Change the values of select's when anyone of the select changes */
$('select').change(function() {
setValue = $(this).val();
$('select').each(function() {
$(this).val(setValue);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

Click on label, to select one option

Exists a method for click in label and select one specific option into select?
I don't like use JS
Follow the code:
<label for="a">State</label>
<select name="">
<option value="">teste</option>
<option value="">teste X</option>
<option value="" id="a">teste A</option>
</select>
Thanks!

html:
<label data-value="c">C</label>
<select name="" id="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
jQuery:
$(document).on("click", "label", function(evt) {
evt.preventDefault();
$("#myselect").val($(this).data("value"));
});

Run some jQuery when any option group option is selected

How can you run jQuery when any option group option is selected. In this case I want to make inputs show and hide based on when any option in one of the two option groups is selected.
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
<input id="inputOne" type="text" placeholder="Input one"/>
<input id="inputTwo" type="text" placeholder="Input two"/>

JSFiddle
http://jsfiddle.net/u76eynap/2/
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
JS
$("#inputOne, #inputTwo").hide();
$('select').change(function () {
if ($("select option:selected").parent()[0].label == "One") {
$("#inputOne").show();
$("#inputTwo").hide();
} else if ($("select option:selected").parent()[0].label == "Two") {
$("#inputTwo").show();
$("#inputOne").hide();
} else {
$("#inputOne, #inputTwo").hide();
}
});

Try this :Initially hide input fields. Then get the parent of selected option and read its label. Using that label identify the input and make it visible
HTML:
<input id="inputOne" type="text" placeholder="Input one" style="display:none;"/>
<input id="inputTwo" type="text" placeholder="Input two" style="display:none;"/>
jQuery:
$(function(){
$('select').change(function(){
var $optionGroup = $(this).find('option:selected').closest('optgroup');
//use jquery start attribute selector to hide all inputs
$('input[id^=input]').hide();
//select input respective to selected optgroup and show it.
$('input[id=input' + $optionGroup.attr('label') + ']').show();
});
});
JSFiddle Demo

Categories