JavaScript onclick 事件对 <select> <option> 不起作用吗？答案

【问题标题】：Does the JavaScript onclick event not work on <select> <option>'s?JavaScript onclick 事件对 <select> <option> 不起作用吗？
【发布时间】：2014-01-28 13:48:54
【问题描述】：

由于某种原因，它下面的代码无法正常工作。除非我对我的 JavaScript 非常愚蠢，否则除了在<option>s 上没有触发的 onclick 事件之外，我看不到出了什么问题。

function showOther() {
  document.getElementById('other').value = "";
  document.getElementById('other').style.display = 'block';
  document.getElementById('otherBR').style.display = 'block';
}

function hideOther() {
  document.getElementById('other').style.display = 'none';
  document.getElementById('otherBR').style.display = 'none';
}

#other {
  display: none;
}
#otherBr {
  display: none;
}

<select name="" id="drop_down">
  <option value="choose" onclick="hideOther();">Please choose</option>
  <option value="Allure" onclick="hideOther();">Allure</option>
  <option value="Elle" onclick="hideOther();">Elle</option>
  <option value="In-Style" onclick="hideOther();">In-Style</option>
  <option value="other" id="otherOption" onclick="showOther();">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />

【问题讨论】：

你需要钩住选择元素。
使用“onchange”事件。这些选项应被视为父选择的一部分，而不是单独的控件。
@laaposto OP 的示例不使用 jQuery...
@BrianDriscoll 如果需要，我可以使用 jQuery。我刚接触它，所以我不想查看所有这些，因为客户项目明天到期。
如果您有答案，请将其发布为答案，而不是评论！

标签： javascript html css forms

【解决方案1】：

将此函数添加到您的 JS：

function showHideOther(){
    if (document.getElementById('drop_down').value == 'other') {
         showOther();   
    } else {
         hideOther();   
    }
}

并像这样更改您的选择元素：

<select name="" id="drop_down" onchange="showHideOther();">
        <option value="choose">Please choose</option>
        <option value="Allure">Allure</option>
        <option value="Elle">Elle</option>
        <option value="In-Style">In-Style</option>
        <option value="other">Other</option>
</select>

function showHideOther() {
  if (document.getElementById('drop_down').value == 'other') {
    showOther();
  } else {
    hideOther();
  }
}

function showOther() {
  document.getElementById('other').value = "";
  document.getElementById('other').style.display = 'block';
  document.getElementById('otherBR').style.display = 'block';
}

function hideOther() {
  document.getElementById('other').style.display = 'none';
  document.getElementById('otherBR').style.display = 'none';
}

#other {
  display: none;
}
#otherBr {
  display: none;
}

<select name="" id="drop_down" onchange="showHideOther();">
  <option value="choose">Please choose</option>
  <option value="Allure">Allure</option>
  <option value="Elle">Elle</option>
  <option value="In-Style">In-Style</option>
  <option value="other">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />

【讨论】：

如果您将加载选项更改为 No wrap，它可以在 jsFiddle 中工作...请参见此处：jsfiddle.net/gLML3/22
太好了，为了澄清实施，No Wrap 在您自己的网站上使用它意味着什么。就像该代码不应该放在标题中一样吗？还是身体？还是完全不同的东西？
表示函数声明没有被其他代码包裹，如window.onLoad = function() { function showHideOther(){...} }

【解决方案2】：

只有 JS 的答案，而不是 jQuery：

选项标签中的

onclick 事件仅被 Firefox 识别。如果您需要适用于所有浏览器（例如 IE 或 Chrome）的解决方案，您可以在“Select”元素上使用 onchange 事件。

HTML：

<select name="" id="drop_down" onchange="showHideOther(this.value);">
    <option value="choose" ">Please choose</option>
    <option value="Allure">Allure</option>
    <option value="Elle" >Elle</option>
    <option value="In-Style" >In-Style</option>
    <option value="other" id="otherOption">Other</option>
</select>

在html head部分定义为脚本的JS：

function showHideOther(value){
    alert(value);
    if (value==='other'){
        document.getElementById('other').value = "";
        document.getElementById('other').style.display = 'block'; 
        document.getElementById('otherBR').style.display = 'block';
    }
    else{
            document.getElementById('other').style.display = 'none'; 
            document.getElementById('otherBR').style.display = 'none';
    }
}

JSFiddle 示例工作正常：http://jsfiddle.net/amontellano/gLML3/14/

希望对你有帮助。

【讨论】：

我根本看不到您的代码是如何工作的。您在 HTML 中有错误，并且永远不会调用 showOther。
我也在回答你需要在选择元素中使用 onchange 事件，而不是在你的选项中使用 onclick。我认为当前的示例可以满足您的需要，我的朋友。
@user3179156 我的示例在 JSFiddle 中运行良好。如果你愿意，试试吧。

【解决方案3】：

DEMO

var dropdown = document.getElementById('drop_down');

dropdown.onchange = function() {
  var selected = dropdown.options[dropdown.selectedIndex].value;

  switch(selected) {
    case 'other':
      document.getElementById('other').value = "";
      document.getElementById('other').style.display = 'block'; 
      document.getElementById('otherBR').style.display = 'block';
      break;
    default:
      document.getElementById('other').style.display = 'none'; 
      document.getElementById('otherBR').style.display = 'none';
      break;
  }
}

【讨论】：

【解决方案4】：

只需将这些函数添加到您的代码中：

$('#drop_down').on('change', function(){
    ($(this).val() == 'other') ? showOther() : hideOther();
});

这里是：http://jsfiddle.net/gLML3/7/

【讨论】：

这需要使用 jQuery，OP 没有使用。