Блог

Главная - Вопросы по программированию - Как изменить цвет фона поля ввода на основе onclick?

Как изменить цвет фона поля ввода на основе onclick?

#javascript #html #jquery #css

Вопрос:

Я хочу изменить основной цвет поля ввода в зависимости от выбора пола.

До сих пор у меня было:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
 $(document).ready(function(){
   $("#male").click(function(){
    $("#gender").css("backgroundColor:#0000FF");
 }); 
</script> 

<script>
 $(document).ready(function(){
   $("#female").click(function(){
    $("#gender").css("backgroundColor:#FFC0CB");
 }); 
</script> 

<form>
 <label for="gender">Gender:</label>
 <select id="gender" name="gender">
   <option value="male" selected>Male</option>
   <option value="female">Female</option>
 </select><br>
</form>

Это не сработало

Ответ №1:

вы можете иметь эту функцию JavaScript и вызывать ее onchange= примерно так

 function changeColor(el) {
if (el.value == "male")
{
  document.body.style.backgroundColor = "#0000FF";
  }
if (el.value == "female")
{
  document.body.style.backgroundColor = "#FFC0CB";
  }
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<form>
 <label for="gender">Gender:</label>
 <select id="gender" name="gender" onchange="changeColor(this)">
   <option disabled selected value> -- select an option -- </option>
   <option value="male">Male</option>
   <option value="female">Female</option>
 </select><br>
</form>

Комментарии:

1. А? ОП хочет выбрать пол, а не цвет в <выбрать>. Произвольное изменение значений параметров в соответствии с вашим кодом не имеет смысла

2. @charlietfl о, я вижу, хорошо, я обновил свой код

Ответ №2:

События не поддерживаются в <option> кроссбраузерных элементах

Вы хотите использовать событие изменения выбранного, а затем условно заданного цвета на основе нового значения.

Также обратите внимание, что ваш синтаксис для css() не совсем правильный

 $("#gender").change(function() {
  const color = this.value === 'female' ? '#FFC0CB' : '#0000FF';
  $(this).css('backgroundColor', color)
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male" selected>Male</option>
    <option value="female">Female</option>
  </select><br>
</form>

Ответ №3:

Получите текущую опцию:выбранное значение с помощью $(#gender option:selected).val() , затем установите его с помощью селектора тегов элементов. В вашей функции изменения вы можете получить доступ к элементу с помощью $(this) . Используйте условное обозначение, чтобы узнать, установлено ли оно $(this).val() === "male" ==> > $(this).css("background-color", "lightblue") если $(this).css("background-color", "pink") по умолчанию не установлено значение «женщина», так как это ваш единственный другой вариант.

 $(document).ready(function() {
  $('#gender option:selected').val() === "male" ? $('#gender').css("background-color", "lightblue") :  $('#gender').css("background-color", "pink")
  
  $("#gender").change(function(e) {
    $(this).val() === "male" ? $(this).css("background-color", "lightblue") : $(this).css("background-color", "pink")
  })
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>
  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male" selected>Male</option>
    <option value="female">Female</option>
  </select><br>
</form>
Метки: