Question

我正在使用一个下拉菜单，因此我想获取用户在下拉列表中选择的选项的值。它使用onmousedown事件在Chrome上运行良好，但在Firefox上却无法运行，该值在Chrome上会收到警报，但在Firefox上不会。请协助？

布局

<div class="check-now" style="width: 100%;">
      <h1 class="cover-travel">Child(ren)</h1>
          <select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
            <option value="0">None</option>
            <option value="1">1</option>
            <option value="2"> 2</option>
            <option value="3"> 3 </option>
            <option value="4"> 4 </option>
            <option value="5"> 5 </option>
         </select> 
    </div>

所调用的功能在Chrome中效果很好，但在Firefox中效果不佳

function checkChild(val) {
      alert(val);
      //Child One
      if (val == 1){
         //Add code
      }
      //Child Two
      else if (val == 2){
        //Add code 2
      }
      //Child Three
      else if(val == 3){
        //Add code 3
      }
      //Child Four
      else if(val == 4){
        //Add code 4
      }
      //Child Five
      else if(val == 5){
        //Add code 5
      }
      else{
         //Else code
      }
    }

Answer 1

我建议不要编写内联JavaScript。而是将eventListener添加到您的选择中：

var mySelect = document.getElementById('child');

mySelect.addEventListener('change', function(e) {

  if (this.value == 1) {
    console.log('val is 1');
  } else if (this.value == 2) {
    console.log('val is 2');
  } else if (this.value == 3) {
    console.log('val is 3');
  } else if (this.value == 4) {
    console.log('val is 4');
  } else if (this.value == 5) {
    console.log('val is 5');
  } else {
    console.log('val not specified');
  }

});

<div class="check-now" style="width: 100%;">
  <h1 class="cover-travel">Child(ren)</h1>
  <select name="child" id="child">
    <option value="0">None</option>
    <option value="1">1</option>
    <option value="2"> 2</option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
  </select> 
</div>

Firefox中未获取复选框值，但可在Chrome浏览器中使用

1 个答案: