Question

I have selects in list items. onchange of select, if selected options value is empty, I would like to give the parent li element a “isnotselected” class, else if selected option’s value is not empty, I would like to give the parent li element a “isselected” class. How can I do this via jQuery?

<ul>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
</ul>

Answer 1

A Don’t Repeat Yourself solution:

var classes = {
    'true': 'isselected',
    'false': 'isnotselected'
};

$('select').change(function () {
     var sel = !!$(this).val(); // convert value into true/false
     $(this).closest('li').addClass(classes[sel]).removeClass(classes[!sel]);
});

Demo: http://jsfiddle.net/B5Q7m/

---

Alternatively but in the same style, you can rely on the fact that false converts to 0 and ‘true’ converts to 1, although the classes declaration isn’t as descriptive:

var classes = ['isnotselected', 'isselected'];

$('select').change(function () {
    var sel = !!$(this).val();
    $(this).closest('li').addClass(classes[+sel]).removeClass(classes[+(!sel)]);
});

---

Note: .parent() can be used in place of .closest('li'), but .closest is usually the safer option in case you decide to wrap the <select>s in another element later on.