how to trigger an event when selecting an option in select tag with javascript-CodePudding

I have a select tag with some options. The user selects one of the options and if the user's desired option wasn't there, they select the last option which is "others (please mention the subject in the box below)" and then a text input appears below the select tag, and user types in the subject there.

I have written a script but it only functions when the last option is selected and when you reload the page the input appears. I want it to appear anytime the user selects the last option and disappears when the user selects one of the other options and not only when the page is reloaded.

Here is my code:

let others = document.getElementById('others');
let options = document.getElementById('subject');

if (options.value == "4") {
  others.className = "shown";
} else {
  others.className = "hidden";
}

.hidden {
  display: none;
}
.shown {
  display: block;
}

<select name="subject" id="subject">
  <option selected>Choose one of the options</option>
  <option value="1">Report a problem</option>
  <option value="2">Ask a question</option>
  <option value="3">Suggest an item or feature</option>
  <option value="4">Others (please mention the subject in the box bellow)</option>
</select>
<input type="text"  placeholder="Write your message's subject here" id="others">

CodePudding user response：

Your problem is that this code here:

let others = document.getElementById('others');
let options = document.getElementById('subject');

if (options.value == "4") {
  others.className = "shown";
} else {
  others.className = "hidden";
}

is only run when the page is loaded, exactly once, which explains the behavior you mentioned. What you must do instead is assure that your code above gets triggered every time your select value changes, by wrapping your code as the content of a function that is run every time the value of your select tag changes, like so:

function valueChanges() {
let others = document.getElementById('others');
let options = document.getElementById('subject');

if (options.value == "4") {
  others.className = "shown";
} else {
  others.className = "hidden";
}
}

document.getElementById('subjects').addEventListener('change',valueChanges);

// And run the function on page load as well, as until now
valueChanges();

CodePudding user response：

You can use onchange event on select tag to listen value changes for showing/hiding your input field.

let others = document.getElementById('others');
let options = document.getElementById('subject');

//your logic is wrapped into a function
function updateInputDisplay(optionValue) {
  if (optionValue == "4") {
    others.className = "shown";
  } else {
    others.className = "hidden";
  }
}

//whenever the option value gets updated, it will trigger this for input display check
options.onchange = (e) => {
  updateInputDisplay(e.target.value)
}

//the initial input display check if the default value is `Others` (showing the input field)
updateInputDisplay(options.value)

.hidden {
  display: none;
}

.shown {
  display: block;
}

<select name="subject" id="subject">
  <option selected>Choose one of the options</option>
  <option value="1">Report a problem</option>
  <option value="2">Ask a question</option>
  <option value="3">Suggest an item or feature</option>
  <option value="4">Others (please mention the subject in the box bellow)</option>
</select>
<input type="text"  placeholder="Write your message's subject here" id="others">

CodePudding user response：

Here is a way.

let others = document.getElementById('others');
let options = document.getElementById('subject');

options.addEventListener('click', () =>{

  if (options.value === "4") {
    others.className = "shown";
  } else {
    others.className = "hidden";
  }
  
});

.hidden {
  display: none;
}
.shown {
  display: block;
}

<select name="subject" id="subject">
  <option selected>Choose one of the options</option>
  <option value="1">Report a problem</option>
  <option value="2">Ask a question</option>
  <option value="3">Suggest an item or feature</option>
  <option value="4">Others (please mention the subject in the box bellow")</option>
</select>
<input type="text"  placeholder="Write your message's subject here" id="others">