更改選擇的父項李元素類

我有選擇列表項。 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

更改選擇的父項李元素類

回答

相關問題