Bybnovskiy Bybnovskiy - 1 month ago 17
CSS Question

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>

Answer

$('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>

Comments