Is the JavaScript click event ineffective for <select> <option>s?

Question

Is the JavaScript click event ineffective for <select> <option>s?

It seems like there's a problem with the code below that is causing it to not work as expected. I'm trying to figure out why the onclick events on the <option>s are not triggering, but everything else seems fine.

function displayInput() {
  document.getElementById('inputField').value = "";
  document.getElementById('inputField').style.display = 'block';
  document.getElementById('lineBreak').style.display = 'block';
}

function hideInput() {
  document.getElementById('inputField').style.display = 'none';
  document.getElementById('lineBreak').style.display = 'none';
}

#inputField {
  display: none;
}
#lineBreak {
  display: none;
}

<select name="" id="dropdown">
  <option value="choose" onclick="hideInput();">Please choose</option>
  <option value="Allure" onclick="hideInput();">Allure</option>
  <option value="Elle" onclick="hideInput();">Elle</option>
  <option value="In-Style" onclick="hideInput();">In-Style</option>
  <option value="other" id="otherOption" onclick="displayInput();">Other</option>
</select>
<input type="text" name="additional_field" id="inputField" placeholder="Other" />
<br id="lineBreak" />

javascript html css forms

Answer 1

Answer №1

Implement this JavaScript function in your code:

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

Update your select element like so:

<select name="" id="drop_down" onchange="toggleOther();">
        <option value="choose">Please select</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 toggleOther() {
  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="toggleOther();">
  <option value="choose">Please select</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" />

Answer 2

Implement this JavaScript function in your code:

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

Update your select element like so:

<select name="" id="drop_down" onchange="toggleOther();">
        <option value="choose">Please select</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 toggleOther() {
  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="toggleOther();">
  <option value="choose">Please select</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" />

Answer 3

Answer №2

An example of using JavaScript without jQuery:

The onclick event in the option tag is only supported by Firefox. For a solution that works across all browsers including IE and Chrome, you can utilize the onchange event on your "Select" element.

Here is an example in 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>

Including the following JS code in the html head section as a 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';
    }
}

A working example on JSFiddle: http://jsfiddle.net/amontellano/gLML3/14/

I hope this information is useful.

Answer 4

An example of using JavaScript without jQuery:

The onclick event in the option tag is only supported by Firefox. For a solution that works across all browsers including IE and Chrome, you can utilize the onchange event on your "Select" element.

Here is an example in 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>

Including the following JS code in the html head section as a 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';
    }
}

A working example on JSFiddle: http://jsfiddle.net/amontellano/gLML3/14/

I hope this information is useful.

Answer 5

Answer №3

VIEW DEMO

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

dropdownList.onchange = function() { 
  var selectedOption = dropdownList.options[dropdownList.selectedIndex].value; 

  switch(selectedOption) {
    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;
  }
}

Answer 6

VIEW DEMO

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

dropdownList.onchange = function() { 
  var selectedOption = dropdownList.options[dropdownList.selectedIndex].value; 

  switch(selectedOption) {
    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;
  }
}

Answer 7

Answer №4

To integrate this functionality into your existing code, simply include the following functions:

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

You can view a live example of this implementation here: http://jsfiddle.net/gLML3/7/

Answer 8

To integrate this functionality into your existing code, simply include the following functions:

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

You can view a live example of this implementation here: http://jsfiddle.net/gLML3/7/

Is the JavaScript click event ineffective for <select> <option>s?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can Angular prevent displaying 404 errors in the console by utilizing fallback mechanisms?

A method using JQuery and Javascript to retrieve Highcharts data in JSON format, properly structured, by leveraging Selenium with C# programming

Creating a user-friendly form in a Nuxt/Vue application that enables dynamic attribute creation

Alignment dilemmas

I am unable to utilize the map function as it results in a TypeError: The property 'map' is undefined and cannot be read

Updating the navigation with a dynamic CSS class using jQuery

Adjust the vertical position of the image with HTML and CSS

Retrieving the most recent HTML bookmark that was clicked

Can anyone guide me on how to retrieve a popup validation message on a webpage using Selenium with Python?

Issue with BootstrapValidator preventing successful submission of Ajax form with a confirmation message

Tips for Achieving Observable Synchronization

When trying to install express using Node.js npm, an error message 'CERT_UNTRUSTED' is preventing the installation of express

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

Do not activate hover on the children of parents using triggers

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

The comparison between StrictNullChecks and Union Types in terms of syntax usage

I've been struggling with this javascript error for three days, how can I finally resolve it?

The tooltip in Amcharts malfunctions when incorporating the DurationAxis

The iOS website won't fully load until the button is tapped two times

How can the threejs Box3().getSize() method be effectively utilized?