Updating a select dropdown's choices or values based on the selection of another select dropdown using JavaScript

Question

Updating a select dropdown's choices or values based on the selection of another select dropdown using JavaScript

I am working with two HTML select elements. Below is an example of the code:

<select class="select1" onchange='customJavascriptfuntion()'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>


<select class="select2">
<option value='d'>d</option>
<option value='e'>e</option>
<option value='f'>f</option>

<option value='g'>g</option>
<option value='h'>h</option>
<option value='i'>i</option>
<option value='j'>j</option>
</select>

Currently, I am looking for a JavaScript function that will dynamically change the options in the second select based on the option selected in the first select. For instance, if "b" is selected in the first select, then the options in the second select should be "g,h,i,j". If "c" is selected, then the options should be "d,e,f", and if "a" is selected, then all options should be shown.

javascript html css angularjs

Answer 1

Answer №1

Here is an alternative approach using native JavaScript. This code snippet can also be easily converted to jQuery if desired.

function customImplementation(elm){
// get the select2 element (returns array so get the first item)
var select2 = document.getElementsByClassName('select2')[0];

// get the value of select 1
var currentValue = elm.value;

// create arrays for options
var optionB = ["g","h","i","j"]
var optionC = ["d","e","f"]
// combine both arrays for full list of options
var optionA = optionB.concat(optionC); 

// populate select 2 values based on select 1 value
if(currentValue === "a")
createOptions(optionA, select2)
else if(currentValue === "b")
createOptions(optionB, select2)
else if(currentValue === "c")
createOptions(optionC, select2)
}

// function to create options for select 2 (elm)
function createOptions(options, elm){
// reset current options
elm.innerHTML = "<option selected disabled>Select</option>";
// loop through each option and create <option> element
options.forEach(function(optionValue){
// create option element
var opt = document.createElement('option');
// set value
opt.value = optionValue;
// set inner html
opt.innerHTML = optionValue;
// add it to the select box
elm.add(opt)
})
}

<select class="select1" onchange='customImplementation(this)'>
  <option selected disabled>Select</option>
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>


<select class="select2">
  <option selected disabled>Select</option>
</select>

Answer 2

Here is an alternative approach using native JavaScript. This code snippet can also be easily converted to jQuery if desired.

function customImplementation(elm){
// get the select2 element (returns array so get the first item)
var select2 = document.getElementsByClassName('select2')[0];

// get the value of select 1
var currentValue = elm.value;

// create arrays for options
var optionB = ["g","h","i","j"]
var optionC = ["d","e","f"]
// combine both arrays for full list of options
var optionA = optionB.concat(optionC); 

// populate select 2 values based on select 1 value
if(currentValue === "a")
createOptions(optionA, select2)
else if(currentValue === "b")
createOptions(optionB, select2)
else if(currentValue === "c")
createOptions(optionC, select2)
}

// function to create options for select 2 (elm)
function createOptions(options, elm){
// reset current options
elm.innerHTML = "<option selected disabled>Select</option>";
// loop through each option and create <option> element
options.forEach(function(optionValue){
// create option element
var opt = document.createElement('option');
// set value
opt.value = optionValue;
// set inner html
opt.innerHTML = optionValue;
// add it to the select box
elm.add(opt)
})
}

<select class="select1" onchange='customImplementation(this)'>
  <option selected disabled>Select</option>
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>


<select class="select2">
  <option selected disabled>Select</option>
</select>

Answer 3

Answer №2

Implementing the functionality using pure javascript. By monitoring the onchange event, you can dynamically populate the second dropdown list (select2) based on the selected value in the first dropdown list (select1).

function customJavascriptFunction(obj) {
  var select2 = document.getElementsByClassName("select2")[0];
  select2.innerHTML = "";
  if (obj.value == "a") {
    var options = ['d', 'e', 'f', 'g', 'h', 'i'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
  if (obj.value == "c") {
    var options = ['d', 'e', 'f'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
  if (obj.value == "b") {
    var options = ['g', 'h', 'i'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
}

<select class="select1" onchange='customJavascriptFunction(this)'>
<option style="display:none">Select</option>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>

<select class="select2"></select>

Answer 4

Implementing the functionality using pure javascript. By monitoring the onchange event, you can dynamically populate the second dropdown list (select2) based on the selected value in the first dropdown list (select1).

function customJavascriptFunction(obj) {
  var select2 = document.getElementsByClassName("select2")[0];
  select2.innerHTML = "";
  if (obj.value == "a") {
    var options = ['d', 'e', 'f', 'g', 'h', 'i'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
  if (obj.value == "c") {
    var options = ['d', 'e', 'f'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
  if (obj.value == "b") {
    var options = ['g', 'h', 'i'];
    options.forEach(option => {
      var opt = document.createElement('option');
      opt.value = option;
      opt.innerHTML = option;
      select2.appendChild(opt);
    });
  }
}

<select class="select1" onchange='customJavascriptFunction(this)'>
<option style="display:none">Select</option>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>

<select class="select2"></select>

Updating a select dropdown's choices or values based on the selection of another select dropdown using JavaScript

Answer №1

Answer №2

Similar questions

In Laravel Blade, I am looking to display a Modal popup and dynamically pass data based on the user's ID

Leverage the values of object properties from a pair of JavaScript arrays containing objects

How can I connect PHP table data with unique identifiers to JavaScript using arrays?

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

Array of notifications in Vue framework

React Component not retaining its value

showing form validation tips alongside form fields

How should the folder structure be set up for dynamic nested routes in Next.js?

What is the appropriate Typescript return type to use for a $http request that only returns a successful response with no content?

What is the best way to manage the delay that occurs when using the append() function?

Destroy Three.js Renderer

Etiquette for the organization of jQuery functions through chaining and nesting

What are the benefits of opting for $cacheFactory instead of the manual approach to fetching and storing data?

Steps for displaying an image link on an aspx webpage

Display Image After Uploading with AJAX

ReactJS - When a click event is attached to a list of elements, it triggers the "click" event for each individual element in the list

Are personalized URLs necessary for jump anchor links?

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

What benefits does utilizing unordered lists provide in navigation bars?

Combining Applet with Microsoft Access