Jquery - Setting the Selected Value of a Select Control via Its Text Description

jQuery - setting the selected value of a select control via its text description

Select by description for jQuery v1.6+

var text1 = 'Two';$("select option").filter(function() {  //may want to use $.trim in here  return $(this).text() == text1;}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>  <option value="0">One</option>  <option value="1">Two</option></select>

Programmatically set the text of a select - jquery

Check out this answer.

You can use that filter to check the inner text and then you put the selected attribute like this:

.attr("selected", true);

Example I tested it with:

$(function() {
    $("#select").find("option").filter(function() {
        return this.innerHTML == "InnerText";
    }).attr("selected", true);
})

jQuery: Setting select list 'selected' based on text, failing strangely

When an <option> isn't given a value="", the text becomes its value, so you can just use .val() on the <select> to set by value, like this:

var text1 = 'Monkey';
$("#mySelect1").val(text1);

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

You can test it out here, if the example is not what you're after and they actually have a value, use the <option> element's .text property to .filter(), like this:

var text1 = 'Monkey';
$("#mySelect1 option").filter(function() {
    return this.text == text1; 
}).attr('selected', true);

var text2 = 'Mushroom pie';
$("#mySelect2 option").filter(function() {
    return this.text == text2; 
}).attr('selected', true);​

You can test that version here.

How to set a SELECT control using text instead of value using jquery?

If you want to get the value that contains the text, then you may use contains:

$('#cars option:contains("Another Car")');

As per @Burimi suggestion: contains will try to match it's value as well, so you have to use text attribute

$('#cars').find('option[text*="Another Car"]').val();

Sorry, for confusion made by comment. But contains just match it's text not it's value.

jQuery - Set the selected option of a select box using value or text with options nested in optgroups

Solved. Since I already had my element passed to a function as a jQuery variable, $element, I couldn't just use the standard selector in the form of:

$("#state option").filter(
  // filter function
).prop('selected', true);

After a lot of trying, I got this and it works:

function functionIHadToChange($element, value) {
  // other code
  $element.find("option").filter(function(){
      return ( ($(this).val() == value) || ($(this).text() == value) )
    }).prop('selected', true);
}

Set select option 'selected', by value

There's an easier way that doesn't require you to go into the options tag:

$("div.id_100 select").val("val2");

Check out this jQuery method.

Note: The above code does not trigger the change event.
You need to call it like this for full compatibility:

$("div.id_100 select").val("val2").change();

Set selected option by text and reset to default option

Instead of adding selected attribute to the options, set the selected property. This forces the browser to unselect all other selected options (if list is not <select multiple>).

$('.btn').click(function() {
  var value = $(this).val();
  $('#Sel option:contains(' + value + ')').prop("selected", true);
});

Alternatively, you can read the index property and set selectedIndex on the list, which is IMO more clear behaviour.

$('.btn').click(function() {
  var value = $(this).val();
  var index = $('#Sel option:contains(' + value + ')').prop("index");
  $('#Sel').prop('selectedIndex', index);
});

Also, the disabled first option may cause trouble in some browsers when resetting the form.

jquery set selected option by data-value

Your id "myselect is missing the closing ", it should be

<select id="myselect">
..
</select>

Use

      $("#myselect option[data-value='" + response.val +"']").attr("selected","selected");

Here's a fiddle:

https://jsfiddle.net/k38efh2o/

capture selected item value from a select drop down list created from a text file using jquery

Please replace:

$select.append('<option value="' + i + '">' + options[i] + '</option>"');

With this line:

$select.append('<option value="' + options[i] + '">' + options[i] + '</option>"');

This should fix your problem.

---

Related Topics