Get Selected Text from a Drop-Down List (Select Box) Using Jquery

Get selected text from a drop-down list (select box) using jQuery

$("#yourdropdownid option:selected").text();

How to get the text of the selected value of a dropdown list?

You can use option:selected to get the chosen option of the select element, then the text() method:

$("select option:selected").text();

Here's an example:

console.log($("select option:selected").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select>

    <option value="1">Volvo</option>

    <option value="2" selected="selected">Saab</option>

    <option value="3">Mercedes</option>

</select>

Get selected text from a drop-down list using jQuery

Your isValid function will always return validator.isFieldEmpty(selector) since the selector value won't match - you compare #fld_country to #fld_country option:selected.
Maybe this is the issue.

//EDIT

OK. Make sure you're setting correct template. You mentioned you use jasmine-jquery fixtures. Before your test runs you could check if the select has any options.

I believe you're trying to set selected option via jquery - this has a bug, should be:

$("#fld_country").val(validCountry);

This will work if your <select> looks something like this (so again, check your templates)

<select id="fld_country">
  <option value="Poland">Poland</option>
  <option value="Germany">Germany</option>
</select>

The other issue you have is in isSelectedField function. Instead of

return $.trim($('selector option:selected').html())

you probably want to have something like:

return $.trim($(selector + ' option:selected').html())

because you want to use selector variable not the string.

Get text of the selected option with jQuery

Close, you can use

$('#select_2 option:selected').html()

Get selected text of a dropdown's item and split by new line and then show alert result using jQuery

Try this :

alert(selectedItemValue.split('').join('\n'));

Update

$('#dropDownId').change(function(){

var results="";

$('#dropDownId :selected').each(function(index, sel){ 

   results+= $(sel).text()+'\n'; 

});

alert(results);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<select id="dropDownId" multiple="multiple" name="multiple">

  <option value=""> -- Select -- </option>

  <option value="1">AAA</option>

  <option value="2">BBB</option>

  <option value="3">CCC</option>

 </select>

jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

For selected text

var conceptName = $('#aioConceptName').find(":selected").text();

For selected value

var conceptName = $('#aioConceptName').find(":selected").val();

The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

Jquery to get SelectedText from dropdown

I had the same problem yesterday :-)

$("#SelectedCountryId option:selected").text()

I also read that this is slow, if you want to use it often you should probably use something else.

I don't know why yours is not working, this one is for me, maybe someone else can help...

Get selected value of a dropdown's item using jQuery

For single select dom elements, to get the currently selected value:

$('#dropDownId').val();

To get the currently selected text:

$('#dropDownId :selected').text();

---

Related Topics