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/

---

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

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

---

注：classes宣言はとして記述はないがまた同じスタイルで、あなたは、falseは0と「真」に変換し、1に変換しているという事実に頼ることができます：.parent()は.closest('li')の代わりに使用できますが、後で別の要素に<select>をラップすることにした場合は、.closestが通常より安全なオプションです。

Answer 2

非常にシンプル：

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

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

私はjsfiddle

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

にcreated a demo here (link).

Answer 4

例を持っているすべてを行う必要がある変更を登録していますイベントをselect要素に追加して、クラスisselectedおよびisnotselectを削除します。