Question

我最近问过我如何才能在这个link中使用纯jQuery，但是我的客户端需要在纯JS结构中完成而不是基于jQuery而不要问我为什么这就是他想要的所以如何才能我在select标签选项上做了if else

值，例如，如果我使用键盘或鼠标来更改select标签选项中的值，我希望在目标选择标签选项上执行if else，或者这里的选项是我的代码，我需要它才能工作也可以使用键盘。

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#numbers').addEventListener('click',numbersResponse);

function numbersResponse(){
 var numberX= document.querySelector('#numbers').value;
  
  if(numberX == 'one'){
    document.querySelector('#numbersMessage').innerHTML= 'You selected: ' + numberX;
  }
  
  else if(numberX == 'two'){
    document.querySelector('#numbersMessage').innerHTML= 'You selected: ' + numberX;
  }
  
  else if(numberX == 'three'){
    document.querySelector('#numbersMessage').innerHTML= 'You selected: ' + numberX;
  }
  
}
  
});

<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

分配change侦听器而不是click侦听器，只要option发生更改，侦听器就会触发，即使没有单击也是如此。此外，在设置文字时，请指定textContent而不是innerHTML - 这样更安全。

const numbers = document.querySelector('#numbers');
numbers.addEventListener('change', numbersResponse);
function numbersResponse() {
  const numberX = numbers.value;
  const numbersMessage = document.querySelector('#numbersMessage')
  if (numberX == 'one') numbersMessage.textContent = 'You selected: ' + numberX;
  else if (numberX == 'two') numbersMessage.textContent = 'You selected: ' + numberX;
  else if (numberX == 'three') numbersMessage.textContent = 'You selected: ' + numberX;
}

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

Answer 2

您需要更改click事件以更改事件以使侦听器正常工作，并且我可以看到我们正在打印相同的响应，因此我们可以避免if / else条件并直接打印所选选项。

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#numbers').addEventListener('change',numbersResponse);

function numbersResponse(){
 var numberX= document.querySelector('#numbers').value;
 document.querySelector('#numbersMessage').innerHTML= 'You selected: ' + numberX;
  
}
  
});

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

或者你可以使用Switch条件，它也有助于提高性能。

document.addEventListener('DOMContentLoaded', function() {

  document.querySelector('#numbers').addEventListener('change', numbersResponse);

  function numbersResponse() {
    var numberX = document.querySelector('#numbers').value;
    var print = '';
    switch (numberX) {
      case 'one':
        print = 'one';
        break;
      case 'two':
        print = 'two';
        break;
      case 'three':
        print = 'three';
        break;
    }
    document.querySelector('#numbersMessage').innerText= 'You selected: ' + print;

  }

});

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

在纯Js的select标签选项上执行if else？

2 个答案: