Get value from select option by searching/filtering partial option text and output value as jQuery variable

Question

I have a selectbox on a page which looks like this:

<select id="mySelect" autocomplete="off" class="inputbox input-large">
 <option value="">- Select option -</option>
 <option value="1">Car</option>
 <option value="12">- Plane</option>
 <option value="34">- - Train</option>
</select>

On the same page I also have a input like this:

<input type="text" id="myInput" name="myInput" value="Train">

Now I need to return the value 34. The selectbox option does not have to be selected I just need to have the number that is within the value field. So if the input would read Plane it should return 12. Furthermore I would need this value to be a variable so I can use it further down the line in jQuery.

I have been trying to get this now for over an hour but with most examples on the net it is always about making the option selected and I simply have not found a example on returning the value.

What I have so far is not even half of what I need but I include it so that everyone can see that I am trying.

  $str = $('#myInput').val();

  var exists = false;
  $("#mySelect option").filter(function() {
      return $(this).text().replace(/-/g,"").trim() == $str;
      var exists = true;
  });
  console.log(exists);

For everyone who is willing to put down a code example please start from scratch as the above is probably wrong in a hundred different ways ;-)

Answer 1

Doesn't look like you're too far away:

The return here:

    return $(this).text().replace(/-/g,"").trim() == $str;
    exists = true;

stops the exists = true in the next line from running - return exits the (anonymous filter) function at that point and no code after it runs (within that function).

There are two options that spring to mind without changing your code too much

• use .filter then check the result
• use .each and set exists within the loop

In the second case, using each = each || [test] means it will stay true once set - if you were using a simple for then you would add a break once found.

$str = $('#myInput').val();

var exists = false;
var filtered = $("#mySelect option").filter(function() {
  return $(this).text().replace(/-/g, "").trim() == $str;
});
exists = filtered.length > 0;

console.log(exists);

exists = false;
$("#mySelect option").each(function() {
  exists = exists || $(this).text().replace(/-/g, "").trim() == $str;
});
console.log(exists);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" autocomplete="off" class="inputbox input-large">
  <option value="">- Select option -</option>
  <option value="1">Car</option>
  <option value="12">- Plane</option>
  <option value="34">- - Train</option>
</select>

<input type="text" id="myInput" name="myInput" value="Train">