2015-09-16 7 views
0

У меня есть опция выбора с двумя цветами, красным и синим. Когда я выбираю красный, он должен установить цвет фона на красный, и если я выберу синий, он должен установить цвет фона в синий. Проблема в том, что все, что я выбираю, устанавливает цвет фона в красный.Опция выбора возвращает только один вариант

<select id ="selectColor"> 
    <option >none</option> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
</select> 

$(document).ready(function() { 
    $("#selectColor").change(function() { 
     if ($(this).text != "red") { 
      document.body.style.backgroundColor = "blue"; 
     } 
     if ($(this).text !="blue") 
     { 
      document.body.style.backgroundColor = "red"; 
     } 
    }); 
}); 
+1

Try '$ (это) .text()' ... –

+0

Я пытался, но все еще такая же проблема – abc

+0

я не думаю, что нет необходимо понизить этот вопрос. – Akki619

ответ

1

Ваш Javascript должен быть такой:

$(document).ready(function() { 
$("#selectColor").change(function() { 
    if ($(this).val() != "red") { 
     document.body.style.backgroundColor = "blue"; 
    } 
    else if ($(this).val() !="blue") 
     { 
     document.body.style.backgroundColor = "red"; 
    } 
}); 
}); 

С Валом(), вы получите значение опции. Если вы используете «текст», вы получаете все тексты всех вариантов, а ваши перерывы

1

Свойство text всегда будет функцией jQuery. Это никогда не будет ни из жалоб, с которыми вы тестируете, так что все ваши условия будут соответствовать. Цвет будет изменен на синий, а затем сразу будет изменен на красный.

Вы хотите использовать val() не text.

2

На самом деле, это первый параметр, на котором ваш фон синий, а затем красный, потому что $(this).text не равен ни одному из них. Вероятно, undefined.

Вы ищете метод .val(), чтобы извлечь атрибут value.

$(document).on('ready', function() { 
 
    $("#selectColor").on('change', function() { 
 
    var val = $(this).val(); 
 
    
 
    document.body.style.backgroundColor = val; 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<select id="selectColor"> 
 
    <option value="">none</option> 
 
    <option value="red">Red</option> 
 
    <option value="blue">Blue</option> 
 
</select>

1

Используйте вал() вместо текста();

$(document).ready(function() { 
$("#selectColor").change(function() { 
    console.log($(this).val()); 
    if ($(this).val() != "red") { 
     document.body.style.backgroundColor = "blue"; 
    } 
    if ($(this).val() !="blue") 
     { 
     document.body.style.backgroundColor = "red"; 
    } 
}); 
}); 

DEMO

+0

Отлично, вы исправили проблему, но _why_ это работает? ;) – Tro

+0

Я обновил ответ и для небольшого изменения. Я полагаю, что вопросник может посмотреть, почему val используется вместо текста ... – Akki619

1

Вот пример использования JQuery: -

$(document).ready(function() { 
    $("#selectColor").change(function() { 
     if ($(this).val() === "red") { 
      $('body').css('background-color', 'blue'); 
     } else { 
      $('body').css('background-color', 'red'); 
     } 
    }); 

Посмотрите этот JS скрипку как пример - EXAMPLE });

2

Существует короткий и простой пример:

<select onchange="javascript:document.body.style.backgroundColor=this.value;"> 
 
    <option >none</option> 
 
    <option value="red">Red</option> 
 
    <option value="blue">Blue</option> 
 
</select>

Смежные вопросы