This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get the selected value of dropdownlist using JavaScript?
I have a select:
<select id="short_code">
<option value="12">First</option>
<option value="11">Second</option>
<option value="10">Third</option>
<option value="9">Fourth</option>
</select>
I want to get the value of the selected text. e.g. if the selected text is First so the I need to get 12.
document.getElementById('short_code').value
This should do it:
<script type="text/javascript">
function getSelected(select) {
alert(select.options[select.selectedIndex].value);
}
</script>
<select id="short_code" onchange="getSelected(this)">
<option value="12">First</option>
<option value="11">Second</option>
<option value="10">Third</option>
<option value="9">Fourth</option>
</select>
document.getElementById('short_code').options[document.getElementById('short_code').selectedIndex].text
Try this:
var el = document.getElementById("short_code");
var code = el.options[el.selectedIndex].value;
Related
This question already has answers here:
Javascript/jQuery: Set Values (Selection) in a multiple Select
(9 answers)
Closed 5 years ago.
I have a html
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
And in my AJAX success function I have the value
availableon = 'pc,iphone'
Now I want to explode the availableon variable and select the multiple select based on value using javascript or jquery. How will I do that?
You can change the data to an array and then set the value with the array
var availableon = 'pc,iphone'
var dataarray = availableon.split(",");
$("select").val(dataarray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
This question already has answers here:
Run change event for select even when same option is reselected
(6 answers)
Closed 5 years ago.
I want to override the general behavior of an HTML select element by making it fire the change event even when the selected option hasn't changed.
$('select').change(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
How can i achieve this?
You can try like this:-
HTML :
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS :
$("select").mouseup(function() {
var flag = $(this).data("flag");
var cur_val = $(this).val();
if(flag) {
alert(cur_val);
}
$(this).data("flag", !flag);
});
Here is working jsfiddle.
Give it a try, this should work.
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I have two select tags in my page. Each of these have several options within. Now I want to access only the second select box, but since I have used getElementByTagName("options") so it is fetching only the first option tag.I am unable to access the second option tags.
My code is here:
function myFunction() {
var x = document.getElementById("mySelect_two").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<select id="mySelect_one">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal">Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
<p>Click the button to return the value of the selected fruit.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
you need to get elements by tag name on the select rather than entire document
function myFunction()
{
var select = document.getElementById("mySelect_two");
var x = select.selectedIndex;
alert(select.getElementsByTagName("option")[x].value);
}
with options
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.options[selectedIndex].value;
with getElementsByTagName
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.getElementsByTagName("option")[selectedIndex].value;
Use below script to get selected options value:
var e = document.getElementById("mySelect_two");
var str = e.options[e.selectedIndex].value;
alert(str)
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal" selected>Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get the selected value of dropdownlist using JavaScript?
javascript selected value
I have a drop down list for quantities, like this:
<select id="Quantity" name="Quantity" class="quantity_select">
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
I need to use javascript to find the value of the currently selected quantity. When I select e.g. option 2, the selected="selected" doesn't change to the new option. How can I use the DOM to get the current selected quantity?
Thanks
Option 1
HTML
<select id="Quantity" name="Quantity"
class="quantity_select" onchange="SetValue(this.value)>
<option id="1" selected="selected" value="1">1</option>
<option id="2" value="2">2</option>
<option id="3" value="3">3</option>
</select>
JavaScript
function SetValue(val) {
alert(val); // This will be the selected value in the drop down
}
Option 2
If you already have JS in place, and don't want to use option 1, you can simply get the value with getElementById():
var ddl = document.getElementById('Quantity');
var val = ddl.options[ddl.selectedIndex].value;
Use document.getElementById('Quantity').value
USe
document.getElementById('Quantity').options[document.getElementById('Quantity').selectedIndex].value;
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript to Select Multiple options
How can I select an option of HTML <select multiple> element using JavaScript?
My quick example:
<select multiple id="select">
<option value="1">1</option>
<option value="2" class="toselect">2</option>
<option value="3">3</option>
<option value="4" class="toselect">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
var select = document.getElementById("select");
var select_options = select.getElementsByClassName("toselect");
for (var i = 0; typeof(select_options) != "undefined"; i++) {
select_options[i].selected = true;
}
</script>
Here, I'm using class names to designate which options needs to be selected. You can use whatever you want.
Something like this:
var selectBox = document.getElementById('selectbox');
selectBox.children[1].selected = true;
Complete example: jsFiddle