更改选择的父项李元素类

我有选择列表项。 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>

来源

2011-01-23 BugBusterX

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

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和“真”转换为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')，但如果您决定将<select>包装在其他元素中，通常会更安全。

来源

2011-01-23 03:06:46

谢谢！，感谢。好的演示！ – BugBusterX 2011-01-23 05:59:24

很简单：

var classes = ['isnotselected', 'isselected']; 
$('ul li select').change(function() { 
    $(this).closest('li') 
      .removeClass(classes.join(' ')) 
      .addClass(classes[Number(this.value.length > 0)]); 
});

来源

2011-01-23 03:05:00

+1，虽然只有`this.value`可以获得选定的值。 – casablanca 2011-01-23 03:06:47

@casablanca完成。 – 2011-01-23 03:07:18

谢谢你的帮助！ – BugBusterX 2011-01-23 05:58:51

我假设你也想删除相反的类，如果它存在。你需要检查事件目标的.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).

来源

2011-01-23 03:07:33 mVChr

例如在jsfiddle

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

所有你需要做的是办理变更登记事件添加到选择元素添加删除类被选中并且未被选中。

来源

2011-01-23 03:08:53

更改选择的父项李元素类

回答

相关问题