Question

我有这个脚本，您可以输出您在select标签中选择的值，这与click事件完美配合但是如果我点击第一个输入并按Tab键按钮继续选择标签使用

鼠标导航到选择标记，然后您可以使用键盘箭头选择值，或者键入您在选择标记选项中看到的值，但它不起作用或者它很少用于显示我的值'在id元素中输出的m调用numbersMessage，有时我

必须双重输入值才能让它显示我在numbersMessage元素中的值。那么我怎样才能使用箭头键来实现这一点，当我输入我在select标签中看到的内容时，这是我的代码。

 $(document).ready(function(){
   function nF(){
      var numberX = document.getElementById('numbers').value;
    
    if(numberX == 'one'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
    else if(numberX == 'two'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
     else if(numberX == 'three'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
   }
    
    //Works perfect, any click will output the value I selected
    $('#numbers').click(function(){
   nF();
  });
   
  //Not working how I wan't it to work...
  $('#numbers').keypress(function(){
   nF();
  });
    
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<p>Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.</p>

<input style='display:block; width: 800px;'type='text'>

<select id='numbers'>
<option value='one'>1</option>
<option value='two'>2</option>
<option value='three'>3</option>
</select>

<p id='numbersMessage'></p>

以及输入元素在此代码示例中不重要的最后一件事我只添加了输入元素，以向您展示选择标记脚本无法正常工作的其他情况，以便您不会混淆为什么我把输入标签放进去。

Answer 1

$('#numbers').on('change', function(){
   nF();
});

尝试调用下拉列表的更改事件。

Answer 2

$(document).ready(function(){
   function nF(){
      var numberX = document.getElementById('numbers').value;
    
    if(numberX == 'one'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
    else if(numberX == 'two'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
    
     else if(numberX == 'three'){
       $('#numbersMessage').html('You selected: ' + numberX);
    }
   }
    
    //Works perfect, any click will output the value I selected
    $('#numbers').click(function(){
   nF();
  });
   
  //Not working how I wan't it to work...
  $('#numbers').keypress(function(){
   nF();
  });
   $('#numbers').change(function(){
   nF();
  });
    
});

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<p>Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.</p>

<input style='display:block; width: 800px;'type='text'>

<select id='numbers'>
<option value='one'>1</option>
<option value='two'>2</option>
<option value='three'>3</option>
</select>

<p id='numbersMessage'></p>

Answer 3

请参阅以下小提琴。使用更改功能而不是按键事件。

Fiddle

**HTML**
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

    <p>Click on the first input and press the tab key on the keyboard and type out the select option value out or use the arrows on the keyboard to see what value you will select in the select tag a message should appear on what value you have selected below.</p>

    <input style='display:block; width: 800px;'type='text'>

    <select id='numbers'>
    <option value='one'>1</option>
    <option value='two'>2</option>
    <option value='three'>3</option>
    </select>

    <p id='numbersMessage'></p>

    **Javascipt**

    $(document).ready(function(){
       function nF(){
          var numberX = document.getElementById('numbers').value;

        if(numberX == 'one'){
           $('#numbersMessage').html('You selected: ' + numberX);
        }

        else if(numberX == 'two'){
           $('#numbersMessage').html('You selected: ' + numberX);
        }

         else if(numberX == 'three'){
           $('#numbersMessage').html('You selected: ' + numberX);
        }
       }

        //Works perfect, any click will output the value I selected
        $('#numbers').click(function(){
       nF();
      });

      //Not working how I wan't it to work...
      $('#numbers').change(function(){
       nF();
       alert('Hi');
      });

    });

键盘键和箭头无法正确使用此脚本

3 个答案: