jQueryのさまざまなCSSセレクタの単一の機能変更を作成

Question

以下の機能を使用して、.containerのCSSクラス（青、赤、ピンクなど）を選択#selcolorから追加します。異なるIDを持つ他の選択タグで同じ関数を使用することは可能ですか？この場合、クラス（青、赤、ピンクなど）はDIV .containerに追加されず、変数 "div_action"の機能を変更する必要があります。

function select_changed() { 
    jQuery('select#selcolor').each(function() { 
     var selected = jQuery(this).val(); 
     var div_action = '.container'; 
     if(selected == '') { 
     jQuery(div_action).addClass(''); 
     } 
     if(selected == 'blue') { 
     jQuery(div_action).addClass('blue'); 
     } else { 
     jQuery(div_action).removeClass('blue'); 
     } 
     if(selected == 'pink') { 
     jQuery(div_action).addClass('pink'); 
     } else { 
     jQuery(div_action).removeClass('pink'); 
     }; 
     if(selected == 'red') { 
     jQuery(div_action).addClass('red'); 
     } else { 
     jQuery(div_action).removeClass('red'); 
     }; 
    }); 
    } 
    $('select#selcolor').change(function() { 
    select_changed(); 
    }); 

<!-- This is HTML --> 

    <select name="selcolor" id="selcolor" class="form-control"> 
    <option value=''>Select Color</option> 
    <option value="blue">Blue</option> 
    <option value="pink">Pink</option> 
    <option value="red">Red</option> 
    </select> 

Answer 1

event.currentTarget.idは、現在のターゲットのidを取得するために使用されます。したがって、この機能は他の選択ボックスにも使用できます。

注：選択ボックスを1つの選択として想定し、コードを少し簡略化しました。

function select_changed(id) { 
    jQuery('select#'+id).each(function() { 
    var selected = jQuery(this).val(); 
    var div_action = '.container'; 
    jQuery(div_action).removeClass("blue pink red"); 
    jQuery(div_action).addClass(selected); 
    }); 
} 
$('select').change(function(event) { 
    select_changed(event.currentTarget.id); 
}); 

Answer 2

のonChange機能を使用してみてください、これはあなたが必要とするものは何でも内部に行うことができますだけの論理です。

機能：

function select_changed(val) { 
    var selectedValue=val; 
    if(selectedValue=='blue'){ 
    alert("1"+selectedValue); 
    } 
    else if(selectedValue=='pink'){ 
    alert("2"+selectedValue); 
    } 
    else if(selectedValue=='red'){ 
    alert("3"+selectedValue); 
    } 
} 

HTML：

<select name="selcolor" id="selcolor" class="form-control" onchange="select_changed(this.value)"> 
    <option value=''>Select Color</option> 
    <option value="blue">Blue</option> 
    <option value="pink">Pink</option> 
    <option value="red">Red</option> 
</select>