jquery - 更改 select 的父 li 元素类

Question

我在列表项中进行了选择。 select 的 onchange 时，如果所选选项的值为空，我想给父 li 元素一个“isnotselected”类，否则如果所选选项的值不为空，我想给父 li 元素一个“isselected”类。我怎样才能通过 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

一个不要重复自己的解决方案:

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]);
});

演示:http://jsfiddle.net/B5Q7m/

<小时/>

或者，但风格相同，您可以相信 false转换为 0，'true' 转换为 1，尽管 classes声明不具有描述性:

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

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

<小时/>

注意:.parent()可以用来代替 .closest('li') ，但是.closest如果您决定包装<select>，通常是更安全的选择稍后在另一个元素中。