jQuery select option text by starts with

Question

When an option list is dynamically created from an ajax call I want to set one of the options as Selected based the first few characters of the option text. Using this HTML:

<select id="test">
  <option value="bird">123 Bird</option>
  <option value="bat">456 Bat</option>
  <option value="cat">768 Cat</option>
  <option value="dog">890 Dog</option>
</select>

I can use this jQuery that will set the selected based on the VALUE

$(document).ready(function () {
    $("#test option[value^='ca']").prop('selected', true);
});

But, I want to set the option selected based on the TEXT, and this does not work:

$(document).ready(function () {
    $("#test option[text^='768']").prop('selected', true);
});

Here is a demo with both lines: http://jsfiddle.net/pfinigan/wzy7f5dr/13/

So, the question is how to select the option by the first portion of it's text??

Answer 1

Because the textContent of an element isn't an attribute of that element, but a property, you can't use the [attribute=value] selector; instead you have to select the relevant elements and then filter that collection of elements. Here we use jQuery's filter() method:

// selecting the relevant `<option>` elements, and filtering
// that collection:
$('#test option').filter(function(){

  // here we retain those elements whose text starts
  // with the string of '678' (and discard those
  // elements whose text does not start with 768):
  return this.textContent.startsWith('768')

// and set the 'selected' property of those retained
// elements to true:
}).prop('selected',true);

$('#test option').filter(function(){
  return this.textContent.startsWith('768')
}).prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="bird">123 Bird</option>
  <option value="bat">456 Bat</option>
  <option value="cat">768 Cat</option>
  <option value="dog">890 Dog</option>
</select>

If, however, you wished to use plain JavaScript then we could achieve this with plain JavaScript:

// Create an Array from the iterable Object (a NodeList)
// returned from document.querySelectorAll():
Array.from(document.querySelectorAll('#test option'))

  // filtering that Array of <option> elements:
  .filter(function(option) {
    // 'option' refers to the current <option> of the
    // Array of <option> elements over which we're iterating:

    // here we retain those whose textContent starts with
    // the String '768':
    return option.textContent.startsWith('768')

  // iterating over the Array returned by Array.prototype.filter():
  }).forEach(function(option) {
  // option again refers to the current <option>:
    // setting the selected property to true:
    option.selected = true;
  });

Array.from(document.querySelectorAll('#test option')).filter(function(option) {
  return option.textContent.startsWith('768')
}).forEach(function(option) {
  option.selected = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="bird">123 Bird</option>
  <option value="bat">456 Bat</option>
  <option value="cat">768 Cat</option>
  <option value="dog">890 Dog</option>
</select>