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>
Related
I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!
You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
Brief
I am attempting to change the value of all dropdown boxes with the class of admin__control-select to remove when the Remove All button is pressed
Issue
The below code appears to work, but only updates the value of the first select box. I tried using querySelectorAll but that doesn't work at all.
Code
<script type="text/javascript">
var selectFunction = function() {
document.querySelector('.admin__control-select').value = "remove";
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
Use querySelectorAll(), it returns an Array with matched elements.
Then, traverse the array with for().
var elms = document.querySelectorAll('.admin__control-select');
for(var i=0; i<elms.length; i++){
elms[i].value ='remove';
}
Try this:
<script type="text/javascript">
var selectFunction = function() {
var selects = document.querySelectorAll('.admin__control-select');
selects.forEach(s => s.value = 'remove');
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
querySelectorAll()
returns the elements so you have to loop over them and set the value property.
I have a select tag where it contains some values, as shown below:
<select id="menu" SIZE=6 onChange="go()">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Now i am using below script for this, where it get the selected value from the drop down,
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
// here i need to make a specific link using this selected drop down value
}
</script>
I just need to know how can i make use of this selected value and go to specific link like
window.location.href='getCityDetails.jsp?c=sv'; // this is not working properly
Can anyone suggest me best solution for this.
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
window.location.href='getCityDetails.jsp?c=' + sv;
}
</script>
Hope it helps you
HTML :
<select id="menu" SIZE=6 onChange="go(this.value)">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Javascript :
function go(desination){
if (destination != ''){
window.location.href='getCityDetails.jsp?c=' + desination;
}
}
you need to concatenate the string properly. try this:
window.location.href='getCityDetails.jsp?c=' + sv;
-- You can use--
var TaskType = document.form1.SelTaskType.value;
-- TaskType will display selected option from below
<select id="SelTaskType" name="SelTaskType" >
<option selected>-- select --</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
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
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;