Select a selection option based on text

jquery select option by text
set selected value of dropdown in jquery by text
jquery set selected option by value
jquery loop through select options set selected
jquery change select option value and text
javascript set selected option by index
set selected value of dropdown in jquery by value
set selected value of dropdown in javascript

I need it in "modern DOM" if possible.

Here is the code.

<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

I have tried the following but I need it for text and this does not work.

var val = 'US 10.5';    
document.querySelector('#skuAndSize [value="' + val + '"]').selected = true;

Please help, I need this in modern dom as I am using it in Swift (evaluateJavaScript).

You can set selectedIndex with javascript

const val = 'US 10.5';
const skuAndSize = document.getElementById ('skuAndSize');
skuAndSize.selectedIndex = [...skuAndSize.options].findIndex (option => option.text === val);
<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

jQuery: Setting select list 'selected' based on text, failing strangely , 4.2) to set the 'selected' attribute of a select list based on its 'text' description rather than its 'value': $("#my-Select option[text=" + myText +"]"). attr("selected","selected") ; This code worked fine, until I noticed one select list on which it failed, depending on the text that was being matched. The selectedIndex property of the select list specifies the location of the selected option in the node list. The text property of an option is the content of the option element. Using a for Loop to Obtain Selected Option. You can use a for loop to iterate through the options of a select list to determine which is selected. A function can be defined to return a reference to the selected option or its value.

You can use Array#find() and compare the text property of <option> to wanted value

var val = 'US 10.5',
  options = document.querySelector('#skuAndSize').options,
  wantedOption = Array.from(options).find(o => o.text === val);
  
if (wantedOption) {
  wantedOption.selected = true;
}
<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Setting selected option in dropdownlist by the text, not value, $('#MySelect').val("12345");. if there is an option in the select with the value " 12345". But how do I set the selected option by the option text? Adding the “selected” attribute means selecting the option. Now we are able to select an option by its text using the simple and easy to use jQuery code. Only one line of jQuery did this task. Here the one line code is: $("#myDropdown option:contains(Option 2)").attr('selected', 'selected'); The code adding the attribute “selected” to the option contains the text “Option 2”.

This is jquery version for your requirement.

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

var text1 = 'US 10.5';
$("#skuAndSize option").filter(function() {
    
    return $(this).text() == text1; 
}).prop('selected', true);

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Select option from dropdown by text in jQuery, Select option from dropdown select tag by text instead of value in jQuery. <select id="myDropdown"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <button id="selectOption">Select</button> Select the control that to add options to. Under Control Tools, from the Properties tab, click Control Properties. On the Data tab, select Get choices from fields in this form. Next to the Entries box, click Select XPath.

Quick answer

You can set the value of a select by setting the property value:

document.querySelector('#skuAndSize').value = '22348622:10.5';

See https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Complete Example

const tests = [4, 'Three', 2, '1'];
let i = 0;

window.setInterval(() => {
  const value = tests[i++ % tests.length];
  document.querySelector('select').value = value;
  document.querySelector('p').textContent = `Programatically set \´${value}\´ (type: ${typeof value})`;
}, 2000);
<select>
  <option>-</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option>Three</option>
</select>

<p></p>

HTML DOM Option text Property, Example. Return the text of the selected option in a drop-down list: var x = selTag. options[selTag.selectedIndex].text;. Try it Yourself �� Changing a select option without JQuery. In this example, I am going to use vanilla JavaScript. Although the JQuery library is great, you may find yourself in situations where you don’t have access to it. It’s also not a terrific idea to include an entire library just for the sake of changing a select element.

jQuery set dropdown option based on text, I want to be able to set the selected attribute on a dropdown menu based on the option text NOT value. Code: <select id="dropDownMenu">� Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy: 1. 2. $ ( "#myselect" ).val (); // => 1. The second is the text value of the select. For example, using the following select box: 1.

How to get selected text from a drop-down list using jQuery , We can select text or we can also find the position of a text in a drop down list using option:selected attribute or by using val() method in jQuery. Text Selection Color. Select the following text: Default text selection color. Custom text selection color. How To Change Text Selection Color. Use the ::

Get Value or Selected Option in Select Box Using JavaScript, text );. The options property of the select list is a node list of all the option elements contained within it. The selectedIndex� To check whether a given <select> element has such an option, use the .has () method: if (mySelect.has('option:contains (abc)').length) To find all <select> s that contain such an option, use the :has () selector: $('select:has (option:contains (abc))') share. Share a link to this answer. Copy link.