This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
JavaScript retrieving the text of the selected option in select element
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1"> Option1 </option>
<option value="2"> Option2 </option>
<option value="3"> Option3 </option>
<option value="4"> Option4 </option>
</select>
From the above example, the integer value is being passed to the showUser function by the use of this.value. If instead of passing the value, I wanted to pass the contents of whatever is inside the option tag, like "Option1", how would I do this? I have tried using
showUser(this.innerHTML)
but that doesn't seem to work, or perhaps I'm approaching it incorrectly. I've looked online at options to use getElementByID but then I think I would need a unique ID for every option.
You'd use:
showUser(this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : '');
See the DOM2 HTML specification's documentation of HTMLSelectElement and HTMLOptionsElement.
HTML:
<select name="users" onchange="showUser(this)">
<option value="">Select a person:</option>
<option value="1"> Option1 </option>
<option value="2"> Option2 </option>
<option value="3"> Option3 </option>
<option value="4"> Option4 </option>
</select>
javascript:
function showUser(obj){
alert(obj.options[obj.selectedIndex].innerHTML);
}
fiddle : http://jsfiddle.net/vPhq3/1/
In this context, this refers to the <select> element, not the selected <option>. I think you want to do showUser(this.options[this.selectedIndex].innerHTML)
Related
Context
First off, I am not a developer but I have tried to explain the desired outcome...
I want to use Vanilla JS for this solution.
The problem
I have multiple select dropdowns on the page and ideally want to be able to store the value onchange of each of the dropdowns.
<select name="Value1A" id="Value1A" onchange="storeValue()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Value1B" id="Value1B" onchange="storeValue()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Essentially I want to achieve this...
This is of course not actual working code but hopefully explains what I am trying to do
function storeValue(){
localStorage.setItem(select.id, select.value);
}
i.e. I want to use the select id as the localStorage key - and onchange store the value of the option of that select field (onchange).
Any help would be really appreciated. Any questions or need to me to explain better, let me know.
Pass event inside your onclick handler
it will look like this
<select name="Value1A" id="Value1A" onchange="storeValue(event)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
After inside your storeValue function get the id from event.target like this
function storeValue(event){
localStorage.setItem(event.target.id, event.target.value);
}
In your case you want to store and later retrieve those values.
// Add id:s and values:
<select> // select has children -> the children are the options.
// the children have values and id:s.
<option id ="1" value="0" >0</option>
<option id ="2" value="1" >1</option>
<option id ="3" value="2" >2</option>
<option id ="4" value="3" >3</option>
<option id ="5" value="4" >4</option>
<option id ="6" value="5" >5</option>
</select>
we begin by targeting the select tag and using "onchange" everytime someone clicks on the select the function gets triggered.
The "this" is the current context i.e we will be able to find the currently clicked on child of select which is an option, using this.selectedIndex which is the index number of the currently clicked on option i.e index number will be 0 for the top option and 1 for the next etc etc.
We use the index number inside this.children i.e the children of the select and by now we know the children in this case are the option tags.
document.getElementsByTagName('select')[0].onchange = function() {
var index = this.selectedIndex;
// console.log(this) to see what "this" prints out.
// above line returns the index number of selected
// option
var inputText = this.children[index].value;
// do -> console.log(inputText); to see for your self.
// above we use the index number on the range of options.
// The index number helps us find the option that was clicked.
// Now we add .value to to retrieve the value.
var id = this.children[index].id;
// same as above to retrieve id
localStorage.setItem(id, inputText);
// above saves variables id and inputtext to localstorage.
}
In the above example the console logs a value of 1 which is the currently selected option. How can you log the <select> tag's value of 2?
$(document).ready(function() {
console.log($('.mySelect').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelect" value="2">
<option value="1" selected>Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
This is not valid HTML syntax.
Use data attributes like data-someattr for values you want to pass.
This would work for you .
console.log( $('.mySelect[value=2]').val() );
Please help me with this solution. I have simple form:
<select id="select-1" name="select-1">
<option value="0"> option 1</option>
<option value="1"> option 2</option>
</select>
<select id="select-2" name="select-2">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
Below this form i want display dynamically calculation like this:
option from select-1 is in array (e.g. value[0]=1.50, value[1]=5)
option from select-2 is option value from list
In start result: value[0]=1.50 * 1 = 1,50
after change select result will change dynamically.
Angular is neccessary or only JS?
You have to set the value of each option of your select-2 with a "on-change event" on select-1.
In your on-change function you have to get the value of the select-1 and set the different values for your select-2.
This question already has answers here:
Change the selected value of a drop-down list with jQuery
(18 answers)
Closed 7 years ago.
I'm trying to figure out a way to automatically select an option, based on a passed variable, that matches only the value of that option.
JS Fiddle Link Demo
<label>
<span>Font Type</span>
<select id="options>
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
</label>
function loadSelect(userFont){
$('#options').find('option[value='+userFont+']').attr('selected', 'selected');
}
loadSelect(three);
Just set the value on the <select> tag:
$('#options').val(userFont);
$(function() {
$("#options").val("three");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="options">
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
i have a selectbox which have values from 1 to 4 and I need to put the value I select in a javascript variable and send it in a function.Here is the way I am trying to do that..
<form enctype="application/json" method="post">
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
</select>
<input type="submit" value="submit" onclick="aMethod()"/>
I need this values in a variable and want to put that value in this method so that I can use that.can anybody help
You can retrieve the selected value like this:
var val = document.getElementById("select").value;
Working demo: http://jsfiddle.net/jfriend00/ah7TU/
You can do it like this:
var select = document.getElementById('select');
var value = select.value;
FIDDLE