Issue with get selected option and return - javascript

I have an issue with the return value in js. I need to return it because I wanna use it in
var rusiavimas = selectedServices();
So, my function looks like this.
function selectedServices()
{
var selectedServices = [];
$('.common_change').change(function(){
selectedServices = $(this).val();
alert(selectedServices);
});
return selectedServices;
}
My HTML code
<select name="rusiavimas" class="common_change" id="cars">
<option value="none" selected disabled hidden>
Pasirinkite variantą
</option>
<option value="naujausi">Naujausi viršuje</option>
<option value="pigiausi" >Pigiausi viršuje</option>
<option value="brangiausi">Brangiausi viršuje</option>
</select>
Then I select the option, in the alert function I get the correct value, but in my return, it's not returning it.


Your code contains a lot of problem, I try to fix them below
Your JS script is always return an empty array, because when you call the function var rusiavimas = selectedServices(); the inner .change function is not runs and not change the value of the array
var selectedServices = [];
$('.common_change').change(function(){
selectedServices.push($(this).val());
if(selectedServices.length > 0){
alert("selected service: " + selectedServices.toString());
}
console.log(selectedServices);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="rusiavimas" class="common_change" id="cars">
<option value="none" selected disabled hidden>
Pasirinkite variantą
</option>
<option value="naujausi">Naujausi viršuje</option>
<option value="pigiausi" >Pigiausi viršuje</option>
<option value="brangiausi">Brangiausi viršuje</option>
</select>


Each time after changing your array it gives to your array the last common value.
The best way as was said an comments use selectedSerices.push($(this).val());
You can also use deep copy, which is less recommended in your case selectedSerices = [...selectedSerices, $(this).val()]. I guess it will help you!

Related

How to get value of a dropdown list in HTML using JS? [duplicate]

How do I get the selected value from a dropdown list using JavaScript?
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Given a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;
Results in:
value == 2
text == "test2"
Interactive example:
var e = document.getElementById("ddlViewBy");
function onChange() {
var value = e.value;
var text = e.options[e.selectedIndex].text;
console.log(value, text);
}
e.onchange = onChange;
onChange();
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Plain JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;
This is correct and should give you the value.
Is it the text you're after?
var strUser = e.options[e.selectedIndex].text;
So you're clear on the terminology:
<select>
<option value="hello">Hello World</option>
</select>
This option has:
Index = 0
Value = hello
Text = Hello World

The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.
Source Link
Working Javascript & jQuery Demo
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
The following script is getting the value of the selected option and putting it in text box 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

If you ever run across code written purely for Internet Explorer you might see this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Running the above in Firefox et al will give you an 'is not a function' error, because Internet Explorer allows you to get away with using () instead of []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
The correct way is to use square brackets.

Use:
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the DOM tree and then locating this element inside the form.

There are two ways to get this done either using JavaScript or jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.
So, I'm adding the getElementsByName() solution just for new developers to see too.
NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.
Example using getElementsByName:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

Just use
$('#SelectBoxId option:selected').text(); for getting the text as listed
$('#SelectBoxId').val(); for getting the selected index value

I don't know if I'm the one that doesn't get the question right, but this just worked for me:
Use an onchange() event in your HTML, for example.
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
This will give you whatever value is on the select dropdown per click.

Using jQuery:
$('select').val();

The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Live demo: http://jsbin.com/jiwena/1/edit?html,output .
id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.

Another solution is:
document.getElementById('elementId').selectedOptions[0].value

The simplest way to do this is:
var value = document.getElementById("selectId").value;

You can use querySelector.
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;

Running example of how it works:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>
Note: The values don't change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.

To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
In some rare instances you may need to use parentheses, but this would be very rare.
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.
Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.

I have a bit different view of how to achieve this. I'm usually doing this with the following approach (it is an easier way and works with every browser as far as I know):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>

In 2015, in Firefox, the following also works.
e.options.selectedIndex

In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:
const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

event.target.value inside the onChange callback did the trick for me.

Most answers here get the value of the "this" select menu onchange by a plain text JavaScript selector.
For example:
document.getElementById("ddlViewBy").value;
This is not a DRY approach.
DRY (three lines of code):
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
Get the first select option:
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
With this idea in mind, we dynamically return a "this" select option item (by selectedIndex):
e.target[e.target.options.selectedIndex].innerText;
Demo
let log = document.getElementById('log');
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
log.innerHTML = `<table>
<tr><th>value</th><th>innerText</th></tr>
<tr><td>${value}</td><td>${innerText}</td></tr>
</table>`;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<select id="greet" onchange="handleChange(event)">
<option value="value_hello">Hello innerText</option>
<option value="value_goodbye">Goodbye innerText</option>
<option value="value_seeYou">See you... innerText</option>
</select>
<select id="other_select_menu" onchange="handleChange(event)">
<option value="value_paris">Paris innerText</option>
<option value="value_ny">New York innerText</option>
</select>
<div id="log"></div>

Here is a JavaScript code line:
var x = document.form1.list.value;
Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

I think you can attach an event listener to the select tag itself e.g:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.

You should be using querySelector to achieve this. This also standardizes the way of getting a value from form elements.
var dropDownValue = document.querySelector('#ddlViewBy').value;
Fiddle: https://jsfiddle.net/3t80pubr/

Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );
console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3" selected="selected">Friends</option>
</select>

Here's an easy way to do it in an onchange function:
event.target.options[event.target.selectedIndex].dataset.name

<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

There is a workaround, using the EasyUI framework with all of its plugins.
You only need to add some EasyUI object that can read from an input as a "bridge" to the drop-down menu.
Example: easyui-searchbox
To the left, the drop-down, to the right, the easyui-searchbox:
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
Mind: the var name is the '1' or '2', that is, the "value of the drop-down", while var value is the value that was entered in the easyui-searchbox instead and not relevant if you only want to know the value of the drop-down.
I checked how EasyUI fetches that #mm name, and I could not find out how to get that name without the help of EasyUI. The jQuery behind getName:
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
Mind that the return of this function is not the value of the easyui-searchbox, but the name of the #mm drop-down that was used as the menu parameter of the easyui-searchbox. Somehow EasyUI must get that other value, therefore it must be possible.
If you do not want any plugin to be seen, make it as tiny as possible? Or find perhaps a plugin that does not need a form at all in the link above, I just did not take the time.

HTML tag select option value returned as undefined [duplicate]

How do I get the selected value from a dropdown list using JavaScript?
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Given a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;
Results in:
value == 2
text == "test2"
Interactive example:
var e = document.getElementById("ddlViewBy");
function onChange() {
var value = e.value;
var text = e.options[e.selectedIndex].text;
console.log(value, text);
}
e.onchange = onChange;
onChange();
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Plain JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;
This is correct and should give you the value.
Is it the text you're after?
var strUser = e.options[e.selectedIndex].text;
So you're clear on the terminology:
<select>
<option value="hello">Hello World</option>
</select>
This option has:
Index = 0
Value = hello
Text = Hello World

The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.
Source Link
Working Javascript & jQuery Demo
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
The following script is getting the value of the selected option and putting it in text box 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

If you ever run across code written purely for Internet Explorer you might see this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Running the above in Firefox et al will give you an 'is not a function' error, because Internet Explorer allows you to get away with using () instead of []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
The correct way is to use square brackets.

Use:
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the DOM tree and then locating this element inside the form.

There are two ways to get this done either using JavaScript or jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.
So, I'm adding the getElementsByName() solution just for new developers to see too.
NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.
Example using getElementsByName:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

Just use
$('#SelectBoxId option:selected').text(); for getting the text as listed
$('#SelectBoxId').val(); for getting the selected index value

I don't know if I'm the one that doesn't get the question right, but this just worked for me:
Use an onchange() event in your HTML, for example.
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
This will give you whatever value is on the select dropdown per click.

Using jQuery:
$('select').val();

The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Live demo: http://jsbin.com/jiwena/1/edit?html,output .
id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.

Another solution is:
document.getElementById('elementId').selectedOptions[0].value

The simplest way to do this is:
var value = document.getElementById("selectId").value;

You can use querySelector.
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;

Running example of how it works:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>
Note: The values don't change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.

To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
In some rare instances you may need to use parentheses, but this would be very rare.
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.
Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.

I have a bit different view of how to achieve this. I'm usually doing this with the following approach (it is an easier way and works with every browser as far as I know):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>

In 2015, in Firefox, the following also works.
e.options.selectedIndex

In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:
const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

event.target.value inside the onChange callback did the trick for me.

Most answers here get the value of the "this" select menu onchange by a plain text JavaScript selector.
For example:
document.getElementById("ddlViewBy").value;
This is not a DRY approach.
DRY (three lines of code):
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
Get the first select option:
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
With this idea in mind, we dynamically return a "this" select option item (by selectedIndex):
e.target[e.target.options.selectedIndex].innerText;
Demo
let log = document.getElementById('log');
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
log.innerHTML = `<table>
<tr><th>value</th><th>innerText</th></tr>
<tr><td>${value}</td><td>${innerText}</td></tr>
</table>`;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<select id="greet" onchange="handleChange(event)">
<option value="value_hello">Hello innerText</option>
<option value="value_goodbye">Goodbye innerText</option>
<option value="value_seeYou">See you... innerText</option>
</select>
<select id="other_select_menu" onchange="handleChange(event)">
<option value="value_paris">Paris innerText</option>
<option value="value_ny">New York innerText</option>
</select>
<div id="log"></div>

Here is a JavaScript code line:
var x = document.form1.list.value;
Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

I think you can attach an event listener to the select tag itself e.g:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.

You should be using querySelector to achieve this. This also standardizes the way of getting a value from form elements.
var dropDownValue = document.querySelector('#ddlViewBy').value;
Fiddle: https://jsfiddle.net/3t80pubr/

Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );
console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3" selected="selected">Friends</option>
</select>

Here's an easy way to do it in an onchange function:
event.target.options[event.target.selectedIndex].dataset.name

<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

There is a workaround, using the EasyUI framework with all of its plugins.
You only need to add some EasyUI object that can read from an input as a "bridge" to the drop-down menu.
Example: easyui-searchbox
To the left, the drop-down, to the right, the easyui-searchbox:
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
Mind: the var name is the '1' or '2', that is, the "value of the drop-down", while var value is the value that was entered in the easyui-searchbox instead and not relevant if you only want to know the value of the drop-down.
I checked how EasyUI fetches that #mm name, and I could not find out how to get that name without the help of EasyUI. The jQuery behind getName:
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
Mind that the return of this function is not the value of the easyui-searchbox, but the name of the #mm drop-down that was used as the menu parameter of the easyui-searchbox. Somehow EasyUI must get that other value, therefore it must be possible.
If you do not want any plugin to be seen, make it as tiny as possible? Or find perhaps a plugin that does not need a form at all in the link above, I just did not take the time.

Not able to reflect mysql query on server side through ajax in original HTML file (client side) [duplicate]

How do I get the selected value from a dropdown list using JavaScript?
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Given a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;
Results in:
value == 2
text == "test2"
Interactive example:
var e = document.getElementById("ddlViewBy");
function onChange() {
var value = e.value;
var text = e.options[e.selectedIndex].text;
console.log(value, text);
}
e.onchange = onChange;
onChange();
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Plain JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;
This is correct and should give you the value.
Is it the text you're after?
var strUser = e.options[e.selectedIndex].text;
So you're clear on the terminology:
<select>
<option value="hello">Hello World</option>
</select>
This option has:
Index = 0
Value = hello
Text = Hello World

The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.
Source Link
Working Javascript & jQuery Demo
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
The following script is getting the value of the selected option and putting it in text box 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

If you ever run across code written purely for Internet Explorer you might see this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Running the above in Firefox et al will give you an 'is not a function' error, because Internet Explorer allows you to get away with using () instead of []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
The correct way is to use square brackets.

Use:
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the DOM tree and then locating this element inside the form.

There are two ways to get this done either using JavaScript or jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.
So, I'm adding the getElementsByName() solution just for new developers to see too.
NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.
Example using getElementsByName:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

Just use
$('#SelectBoxId option:selected').text(); for getting the text as listed
$('#SelectBoxId').val(); for getting the selected index value

I don't know if I'm the one that doesn't get the question right, but this just worked for me:
Use an onchange() event in your HTML, for example.
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
This will give you whatever value is on the select dropdown per click.

Using jQuery:
$('select').val();

The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Live demo: http://jsbin.com/jiwena/1/edit?html,output .
id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.

Another solution is:
document.getElementById('elementId').selectedOptions[0].value

The simplest way to do this is:
var value = document.getElementById("selectId").value;

You can use querySelector.
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;

Running example of how it works:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>
Note: The values don't change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.

To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
In some rare instances you may need to use parentheses, but this would be very rare.
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.
Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.

I have a bit different view of how to achieve this. I'm usually doing this with the following approach (it is an easier way and works with every browser as far as I know):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>

In 2015, in Firefox, the following also works.
e.options.selectedIndex

In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:
const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

event.target.value inside the onChange callback did the trick for me.

Most answers here get the value of the "this" select menu onchange by a plain text JavaScript selector.
For example:
document.getElementById("ddlViewBy").value;
This is not a DRY approach.
DRY (three lines of code):
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
Get the first select option:
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
With this idea in mind, we dynamically return a "this" select option item (by selectedIndex):
e.target[e.target.options.selectedIndex].innerText;
Demo
let log = document.getElementById('log');
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
log.innerHTML = `<table>
<tr><th>value</th><th>innerText</th></tr>
<tr><td>${value}</td><td>${innerText}</td></tr>
</table>`;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<select id="greet" onchange="handleChange(event)">
<option value="value_hello">Hello innerText</option>
<option value="value_goodbye">Goodbye innerText</option>
<option value="value_seeYou">See you... innerText</option>
</select>
<select id="other_select_menu" onchange="handleChange(event)">
<option value="value_paris">Paris innerText</option>
<option value="value_ny">New York innerText</option>
</select>
<div id="log"></div>

Here is a JavaScript code line:
var x = document.form1.list.value;
Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

I think you can attach an event listener to the select tag itself e.g:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.

You should be using querySelector to achieve this. This also standardizes the way of getting a value from form elements.
var dropDownValue = document.querySelector('#ddlViewBy').value;
Fiddle: https://jsfiddle.net/3t80pubr/

Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );
console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3" selected="selected">Friends</option>
</select>

Here's an easy way to do it in an onchange function:
event.target.options[event.target.selectedIndex].dataset.name

<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

There is a workaround, using the EasyUI framework with all of its plugins.
You only need to add some EasyUI object that can read from an input as a "bridge" to the drop-down menu.
Example: easyui-searchbox
To the left, the drop-down, to the right, the easyui-searchbox:
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
Mind: the var name is the '1' or '2', that is, the "value of the drop-down", while var value is the value that was entered in the easyui-searchbox instead and not relevant if you only want to know the value of the drop-down.
I checked how EasyUI fetches that #mm name, and I could not find out how to get that name without the help of EasyUI. The jQuery behind getName:
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
Mind that the return of this function is not the value of the easyui-searchbox, but the name of the #mm drop-down that was used as the menu parameter of the easyui-searchbox. Somehow EasyUI must get that other value, therefore it must be possible.
If you do not want any plugin to be seen, make it as tiny as possible? Or find perhaps a plugin that does not need a form at all in the link above, I just did not take the time.

How to call onchange event when dropdown values are same

I am using Jquery chosen plugin and it's working fine. I have used this plugin in my one of the module. My dropdown values are something like that:
<select id="itemcode" onchange="get_data()">
<option value="1">ITEM001</option>
<option value="2">ITEM002</option>
<option value="1">ITEM001</option>
<option value="3">ITEM003</option>
</select>
It's working fine. But problem is that when user select first option and then try to change third option onchange event does not fire because both options values are same. Is there any way to call onchange event every time if values are same or differ ?
Options values is a unique key of item so it's repeated in dropdown. Dropdown value is duplicate we have allowed to use same item in others module

I saw your implementation and it is working fine in code pen here is the link no need to change anything
<select id="itemcode" onchange="get_data()">
<option value="1">ITEM001</option>
<option value="2">ITEM002</option>
<option value="1">ITEM001</option>
<option value="3">ITEM003</option>
</select>
var get_data =function(){
alert("saas")
}
http://codepen.io/vkvicky-vasudev/pen/dXXVzN

Try this
$('#itemcode').click(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="itemcode">
<option value="1">ITEM001-A</option>
<option value="2">ITEM002</option>
<option value="1">ITEM001-B</option>
<option value="3">ITEM003</option>
</select>

Edit: This doesn't work. Sorry!
You could add a data attribute that differs for each element, for example:
<select id="itemcode" onchange="get_data()">
<option value="1" data-id="1">ITEM001</option>
<option value="2" data-id="2">ITEM002</option>
<option value="1" data-id="3">ITEM001</option>
<option value="3" data-id="4">ITEM003</option>
</select>
If you're using Rails or another framework to generate the <option> tags, it should be easy to add an incremental id to each element.

There is no way to fire get_data() with your current data.
The solution below is more of a hack. When you populate the options, prepend the value with something unique.
Eg.
<select id="itemcode" onchange="get_data()">
<option value="1_1">ITEM001</option>
<option value="2_2">ITEM002</option>
<option value="3_1">ITEM001</option>
<option value="4_3">ITEM003</option>
</select>
Thus your get_data() method will be called everytime. And in your get_data() method, split the value using underscore _ and you can get the actual value there.
function get_data(){
var actualValue=$(this).val().split("_")[1];
//do other processing
...
}
You can use other characters like $, or anything you like, instead of _

Ideally you want to change the data coming from the backend so that you don't get duplicate data. However if this is not possible, another approach would be to sanitise the data before putting it in the select. E.g
https://jsfiddle.net/vuks2bpt/
var dataFromBackend = [
{key:1,
value: "ITEM0001"
},
{key:2,
value: "ITEM0002"
},
{key:1,
value: "ITEM0001"
},
{key:3,
value: "ITEM0003"
}
];
function removeDuplicates(array){
var o = {};
array.forEach(function(item){
o[item.key] = item.value;
});
return o;
}
function get_data(){
console.log('get_data');
}
var sanitised = removeDuplicates(dataFromBackend);
var select = document.createElement('select');
select.id = "itemcode";
select.addEventListener('change', get_data);
Object.keys(sanitised).forEach(function(key){
var option = document.createElement('option');
option.value = key;
option.textContent = sanitised[key];
select.appendChild(option);
})
document.getElementById('container').appendChild(select);

i am using jquery instead of java script
<select id="itemcode">
<option value="1">ITEM001</option>
<option value="2">ITEM002</option>
<option value="1">ITEM001</option>
<option value="3">ITEM003</option>
</select>
jquery
$('#itemcode:option').on("click",function(){
alert(saaas);
})

Simple Javascript / html to alert [duplicate]

How do I get the selected value from a dropdown list using JavaScript?
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Given a select element that looks like this:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Running this code:
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;
Results in:
value == 2
text == "test2"
Interactive example:
var e = document.getElementById("ddlViewBy");
function onChange() {
var value = e.value;
var text = e.options[e.selectedIndex].text;
console.log(value, text);
}
e.onchange = onChange;
onChange();
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>

Plain JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;
This is correct and should give you the value.
Is it the text you're after?
var strUser = e.options[e.selectedIndex].text;
So you're clear on the terminology:
<select>
<option value="hello">Hello World</option>
</select>
This option has:
Index = 0
Value = hello
Text = Hello World

The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.
Source Link
Working Javascript & jQuery Demo
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
The following script is getting the value of the selected option and putting it in text box 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

If you ever run across code written purely for Internet Explorer you might see this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Running the above in Firefox et al will give you an 'is not a function' error, because Internet Explorer allows you to get away with using () instead of []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
The correct way is to use square brackets.

Use:
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the DOM tree and then locating this element inside the form.

There are two ways to get this done either using JavaScript or jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.
So, I'm adding the getElementsByName() solution just for new developers to see too.
NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.
Example using getElementsByName:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

Just use
$('#SelectBoxId option:selected').text(); for getting the text as listed
$('#SelectBoxId').val(); for getting the selected index value

I don't know if I'm the one that doesn't get the question right, but this just worked for me:
Use an onchange() event in your HTML, for example.
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
This will give you whatever value is on the select dropdown per click.

Using jQuery:
$('select').val();

The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Live demo: http://jsbin.com/jiwena/1/edit?html,output .
id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.

Another solution is:
document.getElementById('elementId').selectedOptions[0].value

The simplest way to do this is:
var value = document.getElementById("selectId").value;

You can use querySelector.
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;

Running example of how it works:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>
Note: The values don't change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.

To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
In some rare instances you may need to use parentheses, but this would be very rare.
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.
Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.

I have a bit different view of how to achieve this. I'm usually doing this with the following approach (it is an easier way and works with every browser as far as I know):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>

In 2015, in Firefox, the following also works.
e.options.selectedIndex

In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:
const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

event.target.value inside the onChange callback did the trick for me.

Most answers here get the value of the "this" select menu onchange by a plain text JavaScript selector.
For example:
document.getElementById("ddlViewBy").value;
This is not a DRY approach.
DRY (three lines of code):
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
Get the first select option:
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
With this idea in mind, we dynamically return a "this" select option item (by selectedIndex):
e.target[e.target.options.selectedIndex].innerText;
Demo
let log = document.getElementById('log');
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
log.innerHTML = `<table>
<tr><th>value</th><th>innerText</th></tr>
<tr><td>${value}</td><td>${innerText}</td></tr>
</table>`;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<select id="greet" onchange="handleChange(event)">
<option value="value_hello">Hello innerText</option>
<option value="value_goodbye">Goodbye innerText</option>
<option value="value_seeYou">See you... innerText</option>
</select>
<select id="other_select_menu" onchange="handleChange(event)">
<option value="value_paris">Paris innerText</option>
<option value="value_ny">New York innerText</option>
</select>
<div id="log"></div>

Here is a JavaScript code line:
var x = document.form1.list.value;
Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

I think you can attach an event listener to the select tag itself e.g:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.

You should be using querySelector to achieve this. This also standardizes the way of getting a value from form elements.
var dropDownValue = document.querySelector('#ddlViewBy').value;
Fiddle: https://jsfiddle.net/3t80pubr/

Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );
console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
<option value="1">Happy</option>
<option value="2">Tree</option>
<option value="3" selected="selected">Friends</option>
</select>

Here's an easy way to do it in an onchange function:
event.target.options[event.target.selectedIndex].dataset.name

<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

There is a workaround, using the EasyUI framework with all of its plugins.
You only need to add some EasyUI object that can read from an input as a "bridge" to the drop-down menu.
Example: easyui-searchbox
To the left, the drop-down, to the right, the easyui-searchbox:
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
Mind: the var name is the '1' or '2', that is, the "value of the drop-down", while var value is the value that was entered in the easyui-searchbox instead and not relevant if you only want to know the value of the drop-down.
I checked how EasyUI fetches that #mm name, and I could not find out how to get that name without the help of EasyUI. The jQuery behind getName:
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
Mind that the return of this function is not the value of the easyui-searchbox, but the name of the #mm drop-down that was used as the menu parameter of the easyui-searchbox. Somehow EasyUI must get that other value, therefore it must be possible.
If you do not want any plugin to be seen, make it as tiny as possible? Or find perhaps a plugin that does not need a form at all in the link above, I just did not take the time.

Categories