html - Does the JavaScript onclick event not work on <select> <option>'s? - Stack Overflow

admin管理员组

文章数量:1399770

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.

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" />

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.

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" />

• javascript
• html
• css
• forms

Share Improve this question Follow edited Jan 19, 2017 at 7:11 mplungjan 178k2828 gold badges182182 silver badges240240 bronze badges asked Jan 9, 2014 at 19:57 user123498user123498 5811 gold badge11 silver badge55 bronze badges 8

• 1 You'll need to hook onto the select element instead. – Brian Driscoll Commented Jan 9, 2014 at 19:59
• 4 Use the "onchange" event. The options should be considered part of the parent select and not separate controls. – user2864740 Commented Jan 9, 2014 at 19:59
• 1 @laaposto OP's example doesn't use jQuery... – Brian Driscoll Commented Jan 9, 2014 at 19:59
• @BrianDriscoll I can use jQuery if necessary. I'm just new to it so I didn't want to look all of that up as the client project is due tomorrow. – user123498 Commented Jan 9, 2014 at 20:01
• If you have an answer then post it as an answer, not as a ment! – Fernker Commented Jan 9, 2014 at 20:01

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

Add this function to your JS:

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

And change your select element like this:

<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" />

An answer with JS only, not jQuery:

onclick event in option tag is just recognized by Firefox. If you need a solution that works on all browsers such as IE or Chrome you can use onchange event on your "Select" element.

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>

JS defined in the html head section as script:

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 sample working fine: http://jsfiddle/amontellano/gLML3/14/

I hope it helps.

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;
  }
}

just add these function to your code:

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

se here: http://jsfiddle/gLML3/7/

本文标签： htmlDoes the JavaScript onclick event not work on ltselectgt ltoptiongt39sStack Overflow