Develop Reference

how to get last selected option in multiple select in javascript [duplicate]

This question already has answers here:
How to get all selected values of a multiple select box?
(28 answers)
Closed 11 days ago.
I want to get the last selected <option> in a <select multiple> in javascript not jquery!
The last selected option means the last option selected by the user.
Not that the last option element in the select element!
I try:
<select multiple="multiple" onchange="changeEvent(this)">
function changeEvent(selectTag) {
console.log(selectTag.value);
}
I expected to get the last <option> selected

The value property of the select tag only returns the value of the selected option if the multiple attribute is not set. If the multiple attribute is set, you can use the options property of the <select> element to get an array of all the options and check which ones are selected.
Here's an updated version of the function with JavaScript:
function changeEvent(selectTag) {
let selectedOptions = [];
for (let i = 0; i < selectTag.options.length; i++) {
if (selectTag.options[i].selected) {
selectedOptions.push(selectTag.options[i].value);
}
}
console.log(selectedOptions);
}
<select multiple="multiple" onchange="changeEvent(this)">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>

To get all the selected options, use selectedOptions on the selectTag.
For the 'last' option, use the default selectTag.value.
Remember that .value will only contain the last selected value, so if you'd un-select some value, the previous selected will be set as value of selectTag.value
function changeEvent(selectTag) {
const allSelectedValues = Array.from(selectTag.selectedOptions).map(t => t.value).join(', ');
console.log(`All selected: ${allSelectedValues}`);
console.log(`Previous: ${selectTag.value}`);
}
<select multiple="multiple" onchange="changeEvent(this)">
<option>foo</option>
<option>bar</option>
<option>foobar</option>
</select>

Unable to retrive data attribute using jquery [duplicate]

This question already has answers here:
html - how to get custom attribute of option tag in dropdown?
(7 answers)
Closed 3 years ago.
I have a select option dropdown like:
<select name="futsalSelect" id="futsalSelect" class="form-control">
<option data-timezone="MST" value="1" selected="">Sample futsal One</option>
<option data-timezone="EST" value="3">Sample futsal Three</option>
</select>
Now, I want to retrive that data-timezone value whenever I change that select option.
So, I tried with:
$("#futsalSelect").change(function() {
futsal_id = $(this).val();
timezone = $(this).attr("data-timezone");
console.log(timezone); //undefined
$("#futsalTimezone").text(timezone);
});
But, it is returning undefined.

You want to read the data attribute of the option, not of select.
This will do it:
$('#futsalSelect').change(function() {
futsal_id = $(this).val();
timezone = $(this).find('option:selected').data('timezone');
console.log(timezone); //undefined
$('#futsalTimezone').text(timezone);
});

It is returning undefined because this inside the function refers to the main #futsalSelect element and not the selected option. To get the desired value, do it like this:
$("#futsalSelect").change(function() {
timezone = this.options[this.selectedIndex].getAttribute("data-timezone");
console.log(timezone);
$("#futsalTimezone").text(timezone);
});

use the option:selected selector:
$("#futsalSelect").change(function() {
futsal_id = $("#futsalSelect option:selected" ).val();
timezone = $("#futsalSelect option:selected" ).attr("data-timezone");
console.log(timezone); //undefined
$("#futsalTimezone").text(timezone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="futsalSelect" id="futsalSelect" class="form-control">
<option data-timezone="MST" value="1" selected="">Sample futsal One</option>
<option data-timezone="EST" value="3">Sample futsal Three</option>
</select>

you're trying to get the value from select data-timezone.
you must take it to option inside select.
hope it helps.

Get value of selected option from drop down using jquery.

I have a problem when I get the values ​​of Selected options.
Let me explain I have a list of options :
<select>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
<option value='3'>Option3</option>
<option value='4'>Option4</option>
<option value='5'>Option5</option>
</select>
I get the values ​and I inserts them into a variable for each Selected option and I put them in an array like this :
$("select option:selected").each(function()
{
var listValO = new Array();
var idOption = $("select option:selected").val();
listValO.push(idOption);
});
If I choose only one selected option, it works but when I select several options at the same time, the each () function inserts in the array the same value for the number of selected options.
when I click on the submit button, the array contains listValO several times the same value.
<select>
<option selected value='1'>Option1</option>
<option selected value='2'>Option2</option>
<option selected value='3'>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
listValO returns just 3 times [1,1,1]. In fact, it seleted the first which I clicked or I want in my array [1,2,3].
Sorry for English mistakes if any. I hope you understand my problem and thank you for your future response.

As well as the other answers (using multiple attribute, and using $(this)), you are re-declaring the array for each occurrence of a selected option. Try declaring it outside:
var listValO = new Array();
$("select option:selected").each(function()
{
var idOption = $(this).val();
listValO.push(idOption);
});

Firstly, you need to add the multiple attribute to the select so you can select multiple options. Second, you're redeclaring a new array inside the each callback, so at the end you'll only ever have one option.
You should use .val() instead:
Markup:
<select multiple>
<option selected value='1'>Option1</option>
<option selected value='2'>Option2</option>
<option selected value='3'>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
Javascript:
var optionsArray = $("select").val();

You need to add attribute multiple in select to select multiple value:
<select multiple="multiple">
<option selected value='1'>Option1</option>
<option selected value='2'>Option2</option>
<option selected value='3'>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
Js code: You are iterating over the selected options, you should rather iterate over to select itself to ensure that selected options are added to array once only.
var listValO = new Array();
$("select").each(function()
{
listValO.push($(this).val());
});
//console.log(listValO) for test purpose
Working Demo

IF Dropdown Value = X [duplicate]

This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
Super simple question.. I've got a dropdown select menu:
<select id="builder">
<option value="none">---</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
I'm trying to get a simple Javascript script to run, something like this:
if document.getElementById("builder").value = "one" {
alert("ONE!") }
what syntax should I use to check which value is selected in a dropdown menu?

Detect the change event:
document.getElementById('builder').addEventListener('change', function(e) {
if (e.target.value === 'one') {
alert('one');
}
});

Obtain the number of the item in an options menu?

I'm using .val() in jQuery to retain the value of an options menu onChange.
How would I retain the number (as in as it is ordered) of the item in the drop down using jQuery?
<select>
<option> //option 1
<option> //option 2
</select>
Here is what I have set up now:
<select id="start_month" onChange="getMonthDay()">
<option>Jan</option>
<option>Feb</option>
<option>March</option>
<option>April</option>
<select>
Using,
function getMonthDay()
{
$('#start_month').val()
}
I can get whatever value is selected, but my question is how do I get the Number down of this value in the markup? For March, I would want 3.. and so on

Can you reformulate your question better? I'm still lost in what do you want.
But, nevertheless here is how <select> works in jQuery
<select id="selection">
<option value="val_1">value 1</option>
<option value="val_2">value 2</option>
</select>
$("#selection").val() will give you val_1 or val_2 depending on witch item is currently selected.
If you want to go through all options and check the selected on, you can use
$("#selection option:selected").val();
or itenerate through all <option>'s
$("#selection option").each(function() {
if( $(this).is(":selected") ) {
var v = $(this).val();
}
});
If you want to retain all options you can easily clone them or assign them as data, if you want to keep those values throughout the pages, use Local Database or Cookies to persist the data.
To answer your question after your update:
First: Why don't you have:
<select id="start_month" onChange="getMonthDay()">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">March</option>
<option value="4">April</option>
<select>
And use the value of the selected item?
Second: Just use what I wrote above and itenerate through the options
$("#start_month option").each(function(index, element) {
if( $(this).is(":selected") ) {
// get index position, remember to add 1 as arrays start at 0
var n = index;
// break each
return false;
}
});

You'd get a list of the <option> elements, find the selected one, and use index:
var $opts = $('#start_month option');
var zero_based_index = $opts.index($opts.filter(':selected'));
Demo: http://jsfiddle.net/ambiguous/HyukW/
Just add 1 if you want a one-based index.

I made something like this,with zero based key ;
<select id='deneme'>
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
$('#deneme').change(function(){
$.each( $('#deneme').children('option'),function(key,value){
if($(this).is(':selected'))
alert(key)
})
})
u can check from here http://jsfiddle.net/8JZCw/

No need for any iteration here, let jQuery do that for you, just get the selected index and increment...
$('#start_month option:selected').index() + 1