CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bybnovskiy
Bybnovskiy

Reputation: 105

How to implement the function which is interacts with elements?

Here, I need to set the selected property only for those elements option in which the corresponding li has selected class. Value is determined by the attribute data-input-value at the li and the value attribute in option.

<div class="wrapper">
        <select name="name">
          <option value="val1">name1</option>
          <option value="val2">name2</option>
        </select>
        <ul data-input-name="name">
          <li data-input-value="val1" class="disabled">name1</li>
          <li data-input-value="val2" class="enabled selected">name2</li>
        </ul>
      </div>

Upvotes: 2

Views: 92

Answers (1)

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

$('select[name="name"] option').each(function() {   
  if ($('li[data-input-value="' + $(this).val() + '"]').hasClass('selected')) {
    $(this).prop('selected', true);   
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <select name="name">
    <option value="val1">name1</option>
    <option value="val2">name2</option>
  </select>
  <ul data-input-name="name">
    <li data-input-value="val1" class="disabled">name1</li>
    <li data-input-value="val2" class="enabled selected">name2</li>
  </ul>
</div>

Upvotes: 2

Related Questions