i have 2 dropdownlist, i want if i select Alabama in dropdwon1 the selected value in dropdwon2 should change in to Other.., how to do this using JQuery
<select id="dropdwon1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
</select>
<select id="dropdwon2">
<option value="3">Item1</option>
<option value="4">Item2</option>
<option value="5">Other..</option>
</select>
You must bind event to first select change event and check it's selected value and set value for second select like this:
//Bind change event to first select
$('#dropdwon1').on('change', function(){
//check selected value
var value = $(this).val();
if(value == 1){
//Set selected value for second select
$('#dropdwon2').val(5);
}
})
You have to initialize your value for the second select for the first value of your state select, like so :
if($("#dropdown1").val()=="1"){
$("#dropdown2").val("5"); // Set the value (your answer)
}
then use the change event and give the different values of the second select for the states values.
As the user can select Alabama again after having chosen another value, you have to put the code for the first value in the change event function.
Here is a jsfiddle :
https://jsfiddle.net/mantisse_fr/ak81o26s/4/
Related
When I click the first option, it doesn't take the first option. After clicking some other option, then I click first option, it then takes the value
Fruits.map((x, index) => { return <Option selected={myFruit.name === x.name} value={index}>{x.name}</Option>
Use your state value in the select element instead of selected in the option
<select value={myFruit.name}>
// options
</select>
I want my select to always show the same text, but "keep" the selected option value.
So e.g. my select always shows text "Language", but when I get the value of it in JS, it will return the value of selected option.
How do I achieve this? If there's no possibility for pure HTML + CSS, vanilla JS will do.
Edit: I want this because when i choose a value, I have a list of input boxes which get filled by this. They are then changeable; this select is only used to set the "base" of these inputs. I want this select to always show the same
text because I don't want to end up in a situation where select shows different text than actually the text in inputs that will be used.
Answer:
<select id="mySelect">
<option value="" hidden>Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
document.getElementById('mySelect').addEventListener('change', showSameValue)
function showSameValue() {
let select = document.getElementById('mySelect')
let firstOption = select.querySelector('option')
firstOption.value = select.value
select.selectedIndex = 0
}
Using the change event, you can capture the selected value then simply set the first option as selected and set its value to the selected value.
select = document.querySelector("select");
first = select.querySelector("option");
select.addEventListener("change",function(el){
first.value = el.target.value;
el.target.querySelector("option").setAttribute("selected",false)
el.target.selectedIndex = 0;
console.log(first.value);
});
<select>
<option value="">Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This is a weird behavior but it can be done by
adding a hidden input element next to select
add the event listener to select (onchange) that would change the value of the hidden element and reset select to desired value 'Languages'
The key would be to have proper fields names, so when submitting the form select could be omitted and hidden would prevail.
You can store the selected value in a variable to meet your requirement and then use it wherever you need.
<select name="select" onchange="func(this.value);">
<option value="value1">Display always</option>
<option value="value2">Random Value</option>
</select>
And here's the Js function
var selected = "";
function func(selectedValue) {
document.getElementById( "select").selectedIndex = "0";
selected = selectedValue; // Use this after final selection
}
There are a few ways to achieve this, but using just a <select> would not be possible, I would not advise this on an accessibility UX principal.
One option would be to use a <span> or <div> that when clicked shows the options.
I want to show the value of a dropdown only if it has actually a selected option with selected attribute. Browsers are detecting the first dropdown option by default regardless if it has selected attr or not. So :selected method gives you a result regardless. Is there any way to detect if the selected option actually has the selected attribute?
$( "#optionTagID" ).val();
jQuery docs
Gives you the value of the selected option. You can check if this is the desired value and then hide the element accordingly.
In your option tags, you can have a property of "selected"
<select>
<option value="">Please select an option</option>
<option selected value="foobar">foobar</option>
</select>
For jQuery you can do this:
$("select option").each(function(){
if($(this).prop("selected") == true)
{
alert("found the selected option. The value is: " + $(this).val());
}
});
Fiddle: http://jsfiddle.net/o24g9feo/
HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});
how to set or change value to drop down.
I'm having a drop down list which is initially not selected a value.
How can i select a value using jquery
The val() function is used to get and set the value of input controls (including <select>). Grab a jQuery reference to your <select>, and pass its val() function a string matching the value attribute of the <option> that you wish to select:
$("#mySelect").val("15");
This would select the second option in this list:
<select id="mySelect">
<option value="5">Few</option>
<option value="15">More</option>
<option value="100">Many</option>
</select>
$("#id_select").val("value_1");
id_select -> is the id of your select
value_1 -> is one of the values presents in the option of select