Мне было интересно, как изменить цвет фона с помощью селекторов. Это мой код:
<div id="example">
<select id="worked">
<option id="green">Green</option>
<option id="orange">orange</option>
</select>
</div>
<script>
$(document).ready(function(){
var n = $("select option:selected")
if (n == "green") {
$("body").css("background", "green");
}
else {
$("body").css("background", "orange");
}
});
</script>
Поэтому, если я выбираю зеленый цвет, он не будет показывать ни оранжевый. Есть идеи?
Эта:
var n = $("select option:selected")
возвращает элемент, а не значение, которое будет:
var n = $("select option:selected").val();
который также может быть выполнен как:
var n = $("select").val();
поскольку значение select будет таким же, как выбранный параметр,
но вы, вероятно, хотите подключиться к событию изменения выбора, например:
$("select").on('change', function() {
$("body").css("background", this.value);
});
РЕДАКТИРОВАТЬ:
с условием установки фона оранжевым для чего-либо, кроме зеленого:
$("select").on('change', function() {
if (this.value == 'green') {
$("body").css("background", 'green');
}else{
$("body").css("background", 'orange');
}
});
или:
$("select").on('change', function() {
$("body").css("background", this.value == 'green'?'green':'orange');
});
использование
$('#worked').change(function() { /* triggered when select box changed. */ });
var color = $('#worked').val();
- нет необходимости искать вариант, который выбран таким образом.