Change <select> options with javascript dynamically

Question

Can I use a javascript if/else function to change the select options of a form? I don't want to use CSS to hide/display different dropdown menus, so here is what I've ccome up with:

function getType() {
  var x = document.getElementById("food").value;
  var items;

  if (x === "fruit") {
    items = "Apple" || items = "Oranges" || items = "Bananas";
  else {
    items = "Eggplants" || items = "Olives"
  }
  document.getElementById("pickone").value;
}

<input type="text" id="food">

 <select id="pickone">
   <option id="1"></option>
   <option id="2"></option>
 </select>

I can't seem to find any documentation about how to do this, so any help would be great.

items = "Apple" || items = "Oranges" || items = "Bananas"; what do you want to achieve here? — messerbill
– messerbill, Commented Mar 5, 2018 at 16:03
i think i got it - you want to change the select options depending on what you typed into the input field — messerbill
– messerbill, Commented Mar 5, 2018 at 16:07
the double pipe symbol || represents an OR statement in JavaScript, it does not delaminate a list of items. — Doug
– Doug, Commented Mar 5, 2018 at 16:14

messerbill · Accepted Answer · 2018-03-05 16:12:21Z

15

You could append a string for the options and set it as innerHTML of your select field afterwards:

function getType() {
  var x = document.getElementById("food").value;
  var items;
  if (x === "fruit") {
    items = ["Apple", "Oranges", "Bananas"];
  } else {
    items = ["Eggplants", "Olives"]
  }
  var str = ""
  for (var item of items) {
    str += "<option>" + item + "</option>"
  }
  document.getElementById("pickone").innerHTML = str;
}
document.getElementById("btn").addEventListener("click", getType)

<input type="text" id="food">
<button id="btn">click</button>
<select id="pickone">
</select>

answered Mar 5, 2018 at 16:12

messerbill

5,6391 gold badge31 silver badges39 bronze badges

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

4 Comments

PhysicsIsRelativelyCool Over a year ago

This is great - exactly what I was hoping for. When I copy the code though, it doesn't seem to work. Is there a script library it is dependant on?

PhysicsIsRelativelyCool Over a year ago

To clarify, I have no problems with the html portion, but the clicks eems to do nothing when I'm testing it in notepad

messerbill Over a year ago

@PhysicsIsRelativelyCool no, there is no library needed. If you paste the HTML code and the js this should work. If not you've missed something

PhysicsIsRelativelyCool Over a year ago

Yep, you're right! Your code works perfectly, I had to load the script after the select element, rather than in the <head>

Calvin Nunes · Accepted Answer · 2020-12-11 12:08:11Z

11

Your logic is not very right, specially where you try to do this
items = "Apple" || items = "Oranges" || items = "Bananas";

with the above statement you are saying that itens are Apple OR Oranges OR Bananas, only one at once... you'll need an array of elements, like this:
var itens = ["Apple", "Oranges", "Bananas"];

Then, you will need to loop through it to add them to the select, like this:

var itens = ["Apple", "Orange", "Banana"];
var selectElem = document.getElementById("mySelect");

for (var i = 0; i < itens.length; i++){
  var item = itens[i];
  var element = document.createElement("option");
  element.innerText = item;
  selectElem.append(element);
}

<select id="mySelect"></select>

With that, now you can achieve what you want, just follow this logic...
you can also, if you want, add an `if` statement to check what is the input value, then set the options based on the input value, as you are already trying to do.

edited Dec 11, 2020 at 12:08

answered Mar 5, 2018 at 16:12

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

1 Comment

Nope Over a year ago

@messerbill OP asks how to dynamically add items to a select. This answer showcases that very clearly. OP can hook that logic up their own code. Answer do not need to contain copy paste solutions. If anything they never should.

Jan · Accepted Answer · 2018-03-05 16:19:05Z

You can change options easily with JavaScript. I would advise to use an additional library to ease DOM manipulation, such as JQuery. An example code would look like the example below. You have to make sure to define an event on which the options should be changed. The example listens to changes within the input field.

<input type="text" id="food" value="vegetables"/>
<select id="pickone"></select>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<script>
var fruits = ["Apple", "Oranges", "Bananas"];
var vegetables = ["Eggplants", "Olives"];

vegetables.forEach(function(item){
    $('#pickone').append("<option>" + item + "</option>");
});

$('body').on('keyup', '#food', function (){
    if ($('#food').val() === 'fruits') {
        $('#pickone').html("");
        fruits.forEach(function(item){
            $('#pickone').append("<option>" + item + "</option>");
        });
    }
});

</script>

Collectives™ on Stack Overflow

Change <select> options with javascript dynamically

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related