Get selected value of dropdown - javascript

I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?


You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.


This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;


Use document.querySelector(".quantityDropdown select").selectedIndex


To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>


in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;


<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>


For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;

Related

Get Select Array Value on JavaScript

I want to get Select Element Array value using javascript but i cant get i get all other element value like text etc but cant get select array value.
Select element in My Html code
<select name="abc[]"></select>
<select name="abc[]"></select>
and Javascript Code for get Select Value
document.querySelectorAll("input[name='abc[]']")
but cant get its value, Help me out of this

First: use select, not input in your css selector. Here's a snippet to find the value and text of the selected option:
const selectedOption = document.querySelector(`select[name='abc[]'] > option:checked`);
console.log(`Value: ${selectedOption.value}, Text: ${selectedOption.textContent}`);
<select name="abc[]">
<option value="1">text 1</option>
<option value="2">text 2</option>
<option value="3" selected>text 3</option>
<option value="4">text 4</option>
</select>

Try this : [1]: https://jsfiddle.net/phiphophe/c7a3gdtn/1/
var matches = document.querySelectorAll("select[name='abc[]']");
for(var select of matches){
console.log(select.value);
}

Get a select box by name and set another select box by same name?

I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.

You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});

Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}

If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list

How to get selected option element attr in jQuery?

I want to get attribute value of selected option element.
jQuery:
$("#select_element").val().attr("val");
HTML:
<select id="select_element" class="selectpanel">
<option val="x">element1</option>
<option val="y">element2</option>
</select>

Try this:
$('#select_element option:selected').attr('val');
Or
$('#select_element option:selected').val();
both are valid!

Simple use:
$("#select_element").val();
If you want the text of it, then:
$('#select_element option:selected').text();
JSFIDDLE

try this for get the value in the options
$("#select_element").val()
And try this for get the text in te option selected
$('#slcFoo option:selected').text()
You can see the example here

Re your edit showing:
<option val="x">element1</option>
val is not a valid attribute for option elements. The correct attribute is value, or if you want a custom attribute, use a data- prefix (data-val, for instance).
So depending on whether you meant value or data-val:
If you meant value:
$("#select_element").val() does give you the value (value attribute) of the selected option element in the select box:
console.log($("#select_element").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
If you meant data-val:
If you wanted to get some other attribute from that same option element, you'd do it like this:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
E.g.:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
console.log(otherAttributeValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option data-val="first" value="1">One</option>
<option data-val="second" value="2" selected>Two</option>
<option data-val="third" value="3">Three</option>
</select>

get Value of Selected drop down Item using jQuery

By default I have set value of drop down to 1.But when I want to retrieve that value in click event I get error. Value of that item I get it as "undefined"
$("#cmbTicketType option[value='1']").prop("selected", true);
I tried this
var sTicketType = $('#cmbTicketType').val();
alert(sTicketType );
HTML:
<select id="cmbTicketType" name="cmbTicketType" multiple="multiple" style="display: none; ">
<option value="1">FLM</option>
<option value="7">Bank</option>
<option value="5">Electrical</option>
<option value="3">Network</option>
<option value="6">Power Failure</option>
<option value="2">SLM</option>
<option value="8">Suspect</option>
<option value="4">UPS</option>
</select>

You can set the "selected" value of a <select> element the same way you extract it's selected value.
To set the value -
$("#cmbTicketType").val(1);
Then you can retrieve the value the same way you are doing now -
var sTicketType = $("#cmbTicketType").val();
Here is a simple jsFiddle demo

Question little unclear. Assuming #cmbTicketType is the id of select tag, you ccan get value by
var sTicketType = $('#cmbTicketType option:selected').val();

how to fetch value from <select> tag

I have a list like
<select name="operation" id="operation">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>
I have to get value "XXXX" if user select an option 1, for 2nd I have to get show "YYYY" and so on. And format should be like in the above means i don't have to change value="1","2","3". I need it in javascript.
Thanks

You can get it by grabbing the <select> then getting the <option> at the .selectedIndex, like this:
var sel = document.getElementById('operation');
var text = sel.options[sel.selectedIndex].text;
You can test it out here.

var dropdown = document.getElementById('operation');
var selected = dropdown[dropdown.selectedIndex].text;
probably also check for selectedIndex not being out of bounds

Try this to alert selected option's text :
<select name="operation" id="operation"
onchange="alert(this.options[this.selectedIndex].text);">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>

Categories

Resources