How to read a drop down text using javascript

Question

Sorry for the amateur question but I am still trying to get used to JS. How can I read the text from a drop down using java script when I have multiple classes in html. Any help will be appreciated. thanks

HTML

 <div class="field">

 <select id="addition_membership_type" class="w230" name="booking.additional_frequentFlyerMembershipType" style="display: none;"   aria-disabled="false">
    <option class="hide-from-ui-list" value=""> … </option>
    <option value="IBP"> … </option>
    <option value="JET"> … </option>

</select>
<a id="addition_membership_type-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown w230 ui-corner-all" aria-owns="addition_membership_type-menu" aria-haspopup="true" tabindex="0" href="#" role="button" style="width: 230px;" aria-disabled="false">
    <span class="ui-selectmenu-status">

        Jet Privilege

    </span>

Javascript

<script>




$(document).ready (function()
 {
 var dropdown = $(".field", "#addition_membership_type").text();

if (dropDown == "JET")
{
 window.alert();
 }
 });
 </script>

possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Daniel, Jun 29 '15 at 05:01
possible duplicate of [Get selected text from drop-down list (select box) using jQuery](http://stackoverflow.com/questions/1643227/get-selected-text-from-drop-down-list-select-box-using-jquery) — Shlomi Hassid, Jun 29 '15 at 05:16

score 1 · Accepted Answer · answered Jun 29 '15 at 05:24

I had created a fiddle here https://jsfiddle.net/98b6jr0b/

This gives both the index and value of the selected drop down.

<select id="mySelect">
  <option value="test1">test1</option>
  <option value="test2" selected="selected">test2</option>
 <option value="test3">test3</option>
</select>

The js code

var x = document.getElementById("mySelect").selectedIndex;
var y = document.getElementById("mySelect").options;
alert("Index: " + y[x].index + " is " + y[x].text);

Ur Welcome. Plz mark the answer as correct so that others can get its benifit too. @Josh — Amanjot Kaur, Jul 02 '15 at 03:46

score 0 · Answer 2 · answered Jun 29 '15 at 05:11

0

Should use val():

<script>

$(document).ready (function()
{
var dropdown = $(".w230").val();

if (dropDown == "JET")
{
window.alert("JET");
}
});
</script>

answered Jun 29 '15 at 05:11

Clyde Winux

285
1
3
12

That's not what the op asked about he want the text displayed and not the value. – Shlomi Hassid Jun 29 '15 at 05:15

score 0 · Answer 3 · answered Jun 29 '15 at 05:28

Try this..

<script>
  $('#addition_membership_type').on('change',function(event){
alert('Selected Value: '+$('#addition_membership_type').val());
alert('Selected Text: '+$('#addition_membership_type option:selected').text());  
  });
</script>

Working DEMO Here

How to read a drop down text using javascript

3 Answers3