Question

我想在此代码中使用箭头键，如果我使用键更改选项，则应将类添加到div中，并且应该在用户更改选项时更改背景颜色！

＆＃13;

  $(document).ready(function() {
    $('option').hover(function() {
      4
      $('#colr').removeAttr('class');
      $('#colr').attr('class', '');
      $('#colr')[0].className = '';
      if ($(this).val() == 'red') {
        $('#colr').addClass('red');
      } else if ($(this).val() == 'green') {
        $('#colr').addClass('green');
      } else if ($(this).val() == 'blue') {
        $('#colr').addClass('blue');
      } else {
        $('#colr').addClass('black');
      }
    });

  });

＆＃13;

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.black {
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="height:200px;width:200px" id='colr'></div>
<select id="sel">

  <option class="d" value="red">red</option>
  <option value="green" selected="selected">green</option>
  <option class="d" value="blue">blue</option>
  <option class="d" value="black">black</option>

</select>

＆＃13;

Answer 1

首先尝试此操作：代码将在onchange秒后在代码中使用未使用的4数字

＆＃13;

$(document).ready(function() {
    $('#sel').on('change',function() {
      $('#colr').removeAttr('class');
      $('#colr').attr('class', '');
      $('#colr')[0].className = '';
      if ($(this).val() == 'red') {
        $('#colr').addClass('red');
      } else if ($(this).val() == 'green') {
        $('#colr').addClass('green');
      } else if ($(this).val() == 'blue') {
        $('#colr').addClass('blue');
      } else {
        $('#colr').addClass('black');
      }
    });

  });

＆＃13;

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.black {
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="height:200px;width:200px" id='colr'>Div</div>
<select id="sel">
  <option class="d" value="red">red</option>
  <option value="green" selected="selected">green</option>
  <option class="d" value="blue">blue</option>
  <option class="d" value="black">black</option>
</select>

＆＃13;

Answer 2

将select元素上的事件绑定为：

javascript： -

idA  | name    | idB  | name  | idC  | name
----------------------------------------------------
1    | A       | 2    | AA    | 6    | AAA
     |         | 3    | BB    | 7    | BBB
     |         | 4    | CC    |      | 
     |         |      |       |      | 
     |         |      |       |      | 
     |         |      |       |      |

链接： - https://jsfiddle.net/z7t8m0oy/

jquery： -

document.getElementById("id").onchange = function() {//your code that changes the background};

链接： - https://jsfiddle.net/z7t8m0oy/1/

Answer 3

您需要在更改列表时调用函数。

<select id="sel" onchange="jsFunc()">
    <option class="d" value="red">red</option>
    <option value="green" selected="selected">green</option>
    <option class="d" value="blue">blue</option>
    <option class="d" value="black">black</option>
</select>

<script>
    function jsFunc()
    {
       //do your stuff 
    }
</script>

如何在选择选项上使用鼠标和箭头键？

3 个答案: