Question 36315 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to skip an option tag in a select element using jquery?

So I do have this function named getValue that retrieves option value by using variable that has string on it. My questions is how can I skip the option with a value of '0', and just scan or find the other remaining options. Some of you may ask, why not just change the text 'Dog'?. In my main code var myText is dynamic, meaning it can changed from a click, for example a table row.

code:

function getValue() {
  var myText = "Dog"
  $("#animals option").filter(function() {
    return $(this).html() == myText;
  }).val();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="animals">
  <option value='0'>Dog
    <option>
      <option value='1'>Dog
        <option>
          <option value='2'>Cat
            <option>
</select>
Tags:

2

Answers


  1. 0

    You can extend your filter() to also check the value:

    Pure JS example, since you might not need jquery:

    function getValue(myText = "Dog") {
    const options = [ ...document.querySelectorAll("#animals option") ];
    return options.filter((e) => {
        return e.value !== '0' && e.innerHTML === myText;
    });
}

const res = getValue();
console.log(res);
    <select id = "animals">
  <option value = '0'>Dog<option>
  <option value = '1'>Dog<option>
  <option value = '2'>Cat<option>
</select>
    Login or Signup to reply.
  2. 0

    I’d stick with jQuery and use its additional :contains() selector to find the text match, along with :not() to limit the value match.

    Note that using :contains() means it will match both "Dog" and "Weiner Dog" if that option was present and would match the first one.

    function getValue() {
  var myText = "Dog"
  return $("#animals option:contains('" + myText + "'):not([value='0'])").val();
}
console.log(getValue());
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="animals">
  <option value='0'>Dog</option>
  <option value='1'>Dog</option>
  <option value='2'>Cat</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search