Does the JavaScript onclick event not work on <select> <option>'s?

Question

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

Use the "onchange" event. The options should be considered part of the parent select and not separate controls. — user2864740
– user2864740, 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
– user123498, Commented Jan 9, 2014 at 20:01
If you have an answer then post it as an answer, not as a comment! — Fernker
– Fernker, Commented Jan 9, 2014 at 20:01

mplungjan · Accepted Answer · 2017-01-19 07:13:58Z

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

edited Jan 19, 2017 at 7:13

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jan 9, 2014 at 20:05

Brian Driscoll

19.7k3 gold badges51 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Driscoll Over a year ago

It works in jsFiddle if you change the load option to No wrap... see here: jsfiddle.net/gLML3/22

user123498 Over a year ago

Great, and for clarification on implementation what does No Wrap mean in terms of using it on your own site. As in should that code not go in the header? Or the body? Or something else entirely?

Brian Driscoll Over a year ago

It means that the function declarations are not wrapped in other code, such as window.onLoad = function() { function showHideOther(){...} }

Alberto Montellano · Accepted Answer · 2014-01-09 20:27:20Z

2

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.net/amontellano/gLML3/14/

I hope it helps.

edited Jan 9, 2014 at 20:27

answered Jan 9, 2014 at 20:07

Alberto Montellano

6,4268 gold badges45 silver badges59 bronze badges

3 Comments

Brian Driscoll Over a year ago

I don't see how your code is working at all. You have errors in the HTML and showOther is never called.

Alberto Montellano Over a year ago

I'm answering also that you need to use onchange event in select element instead of onclick inside your options. I think the current sample does what you need now my friend.

Alberto Montellano Over a year ago

@user3179156 My sample is working fine in JSFiddle. Try it if you want.

rgtk · Accepted Answer · 2014-01-09 20:04:31Z

0

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

answered Jan 9, 2014 at 20:04

rgtk

3,5302 gold badges33 silver badges37 bronze badges

Comments

user3058000 · Accepted Answer · 2014-01-09 20:04:15Z

-2

just add these function to your code:

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

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

answered Jan 9, 2014 at 20:04

user3058000

111 silver badge2 bronze badges

1 Comment

Brian Driscoll Over a year ago

This would require the use of jQuery, which OP is not using.

Collectives™ on Stack Overflow

Does the JavaScript onclick event not work on <select> <option>'s?

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related