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

Jquery – How to compare variable and check if it contains select option

I have variable and two selects on a page. I would like to check if variable contains any of the select options, if it does, I want to set it to selected true.

In this example, dropdown 1 option ‘Webinar’ and dropdown 2 option ‘Transport Management’ should be selected true.

var query = "Webinar, Transport Management";

    $('select.select-dropdown option').each(function() {
        if (query.contains($(this).val())) {
            $(this).attr('selected', true);
        }
    });
<div class="dropdowns-group">
  <div class="dropdown">
    <label for="test">Test</label>
    <select class="select-dropdown" name="test" id="test">
      <option value="">Show all</option>
      <option value="Webinar">Webinar</option>
      <option value="Lecture">Lecture</option>
    </select>
  </div>

  <div class="dropdown">
    <label for="test2">Test2</label>
    <select class="select-dropdown" name="test2" id="test2">
      <option value="">Show all</option>
      <option value="Transport Management">Transport Management</option>
      <option value="Teaching">Teaching</option>

    </select>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Not so hard a learn…

    This snippet does exactly what the OP is asking:
    — setting the selected property to true on the corresponding option elements

    const
  query   = "Webinar, Transport Management".split(', ')
, selct_0 = document.querySelector('#test')
, selct_1 = document.querySelector('#test2')
  ;
selct_0.value = query[0];  
selct_1.value = query[1];

console.log('Information control for skeptical minds  (#test options values)');


[...selct_0.options].forEach((opt,i) => 
  {
  console.log( i, '-->', opt.value, opt.textContent, ',  select test ===', opt.selected);
  });
    <div class="dropdowns-group">
  <div class="dropdown">
    <label for="test">Test</label>
    <select class="select-dropdown" name="test" id="test">
      <option value="">Show all</option>
      <option value="Webinar">Webinar</option>
      <option value="Lecture">Lecture</option>
    </select>
  </div>

  <div class="dropdown">
    <label for="test2">Test2</label>
    <select class="select-dropdown" name="test2" id="test2">
      <option value="">Show all</option>
      <option value="Transport Management">Transport Management</option>
      <option value="Teaching">Teaching</option>
    </select>
  </div>
    Login or Signup to reply.
  2. 0 
    const preselectTest = (query) => {
  const queryArr = query.split(/, */);
  const elsSelect = document.querySelectorAll("#test, #test2");
  elsSelect.forEach(elSelect => {
    const elsOptions = elSelect.querySelectorAll("option");
    const opt = [...elsOptions].find(elOpt => queryArr.includes(elOpt.value) );
    if (opt) elSelect.value = opt.value;
  });
};

const query = "Webinar, Transport Management";
preselectTest(query);
    <div class="dropdown">
  <label for="test">Test</label>
  <select class="select-dropdown" name="test" id="test">
    <option value="">Show all</option>
    <option value="Webinar">Webinar</option>
    <option value="Lecture">Lecture</option>
  </select>
</div>

<div class="dropdown">
  <label for="test2">Test2</label>
  <select class="select-dropdown" name="test2" id="test2">
    <option value="">Show all</option>
    <option value="Foo Bar">Foo Bar</option>
    <option value="Transport Management">Transport Management</option>
    <option value="Teaching">Teaching</option>
  </select>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search