Изменить переменную, если выбрана опция

Question

Итак, я получил этот селектор с идентификатором mySelect.

<select name="mySelect" id="mySelect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
</select> 

И если выбран один из этих параметров, я хочу установить цвет переменной в jquery в значение. И позже используйте эту цветовую переменную.

var color; 
    $('#mySelect option:selected').change(function(){ 

    if($(this).val() == '1') { 
    color = #000080;  
    return color; 
    } 
    if($(this).val() == '2') { 
    color = #ff0000;  
    return color; 
    } 
}); 

код JQuery не является правильным, и я не могу это исправить ..

Answer 1

Событие изменения должны быть на select элемент, а не на option:selected, попробуйте следующее:

var color; 
$('#mySelect').change(function(){ 

    if($(this).val() == '1') { 
     color = "#000080";//<- Needs to be a string 
     return color; 
    } 
}); 

Пара вещей, чтобы отметить:

1. Я изменил селектор, чтобы использовать правильный идентификатор (#mySelect), хотя я предполагаю, что это опечатка с вашей стороны?
2. , Вам не нужно использовать option:selected для value, хотя вы должны были бы это вы хотели бы получить доступ к выбранному option DOM элемента (например, чтобы получить text)
3. Я установил свой цвет строки (см комментарии выше)
4. Не уверен, почему вы используете return заявление, вы, вероятно, следует просто удалить этот

Here is a working example

Advanced Solution

Я бы рекомендовал, что вместо того, чтобы использовать набор, если/иначе, что вы используете массив для хранения списка цветов, то вы можете использовать val() в качестве индекса (не забудьте вычесть 1, поскольку он основан на нулевом значении). Как это:

var colors = ["#000080", "#008000", "#800000"]; 

var color; 
$('#mySelect').change(function() { 
    color = colors[$(this).val() - 1]; 
    return color; 
}); 

Here is an example

Answer 2

$('#categorie option:selected') // This is for selected option which won't work 
           // change event handler 

Изменение его обратно, чтобы выбрать тег

$('#mySelect').change(.. //also change your id 

Answer 3

Попробуйте

var color; 
$('#mySelect').change(function(){ 

    switch($(this).val()) { 
    case "1": color = "#000080";break; 
    case "2": color = "#FF0080";break; 
    case "3": color = "#EE0080";break; 
    } 
    alert(color); 
}); 

http://jsfiddle.net/Pesulap/cMLmU/1/

Answer 4

Вам нужно это:

$(function() { $('#mySelect').on('change',function(){ if($(this).val()==1) { /*do stuff here*/ } }); });

демо: http://jsfiddle.net/PwMxk/1/