Home/ Questions/Q 4039022
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:33:00+00:00

I have below code working as desired but the on select works only from

  • 0

I have below code working as desired but the on select works only from the second select change.

Any idea how to fix that?

working sample

<html>
<head>

<title>select & select</title>


<script type='text/javascript'>

var select2data = {

  'English': [['One', 1], ['Two', 2], ['Three', 3]],
  'Spanish': [['Uno', 1], ['Dos', 2], ['Tres', 3]]
};


function change_second_select(){
var sel1 = document.getElementById('select1')
  , sel2 = document.getElementById('select2');
sel1.onchange = function() {
  var os = select2data[sel1.value]; // Get the options required by select1.
  if (os) {
    sel2.options.length = 0; // Clear the options for select2.
    for (var i=0; i<os.length; i++) {
      var o = new Option(os[i][0], os[i][1]);
      try { // Add each option, allowing for browser differences.
        sel2.add(o);
      } catch (ex) {
        sel2.add(o, null);
      }
    }
    sel2.selectedIndex = 0;

  }
  return true;
};
}


</script>


<select id="select1" onchange="change_second_select();">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<select id="select2">

</select>


</head>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your change_on_select to as below:

    Working example @ http://jsfiddle.net/3dCyw/1/

    function change_second_select(){
var sel1 = document.getElementById('select1')
  , sel2 = document.getElementById('select2');
  var os = select2data[sel1.value]; // Get the options required by select1.
  if (os) {
    sel2.options.length = 0; // Clear the options for select2.
    for (var i=0; i<os.length; i++) {
      var o = new Option(os[i][0], os[i][1]);
      try { // Add each option, allowing for browser differences.
        sel2.add(o);
      } catch (ex) {
        sel2.add(o, null);
      }
    }
    sel2.selectedIndex = 0;

  }
  return true;
}
    • 0