Question

我在列表项中选择了。 onchange的选择，如果选中的选项值为空，我想给父元素一个“isnotselected”类，否则如果选中的选项的值不为空，我想给父元素一个“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 = ['isnotselected', 'isselected'];
$('ul li select').change(function() {
    $(this).closest('li')
           .removeClass(classes.join(' '))
           .addClass(classes[Number(this.value.length > 0)]);
});

Answer 2

不要重复自己解决方案：

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通常是更安全的选项，以防您决定打包{{1}稍后在另一个元素中使用。

Answer 3

我假设您也想删除相反的类（如果存在）。您需要检查更改事件的事件目标.val()，如下所示：

$('select').bind('change',function(e){
    $et = $(e.target);
    if ($et.val() === "") {
        $et.parent().removeClass('isselected')
                    .addClass('isnotselected');
    } else {
        $et.parent().removeClass('isnotselected')
                    .addClass('isselected');
    }        
});

我有created a demo here (link).

Answer 4

jsfiddle

上的示例

$("select").change(function(){
    var $li = $(this).parents("li");
    $li.removeClass("isselected").removeClass("isnotselected");
    if($(this).val())
    {
        $li.addClass("isselected");
    }
    else
    {
        $li.addClass("isnotselected");
    }
});

您需要做的就是将更改事件注册到select元素以添加删除类被选中并且未被选中。

更改select的父li元素类

4 个答案: