Fill options of select tag

Question

In my HTML file I have a select tag in which when I select the first one, another select tag should fill out with some options, and when select the other option, some others options will fill out in the other select tag.

I did that in my HTML :

        <script type="text/javascript">
        function fillWirelessChannel(){
            var index;
            var selectTag= document.getElementById('wirelessChannel');                       selectTag.options.length = 0; // wireless should 
            selectTag.options.length = 0; 
            var auto = document.createElement("option");
            auto.value= 'auto';
            auto.innerHTML = 'auto';
            if (document.getElementById('country').selected="1") {
                  for(index=4920; index<=5825; index+=5){
                      var opt = document.createElement("option");
                      opt.value= index;
                      opt.innerHTML = index;     
                      selectTag.appendChild(opt);         
                  }
              } else if(document.getElementById('country').selected="2"){               
                  for(index=4920; index<=6075; index+=5){
                      var opt = document.createElement("option");
                      opt.value= index;
                      opt.innerHTML = index;       
                      selectTag.appendChild(opt);           
                  }
              }
        }
    </script>

The wirelessChanne is the select tag must fill. The country tag is in the if statement and the selected one is our condition. Now when I run the code, the second if does not work.( It does not display till 6075 in the second statement ) and also does not add auto option to the select tag.( I want to display auto in the first option of the wirelessChannel without conditions, I mean at the first index it should be displayed auto) Where I am doing wrong?

Answer 1

to test if a value is equal to something you need to use a double equal sign - to set a value to something you would use a single equal sign.

function fillWirelessChannel(){
    var index;

    var selectTag= document.getElementById('wirelessChannel');
        selectTag.options.length = 0; 

    var auto = document.createElement('option');
        auto.value= 'auto';
        auto.text = 'auto';

    selectTag.appendChild( auto );

    var oCountry=document.getElementById('country');

    if ( oCountry.value==1 ) {
        for( index=4920; index <= 5825; index+=5 ){
            var opt = document.createElement('option');
                opt.value= index;
                opt.text = index;

            selectTag.appendChild( opt );         
        }
    } else if( oCountry.value=='2' ){               
        for( index=4920; index <= 6075; index+=5 ){
            var opt = document.createElement('option');
                opt.value= index;
                opt.text = index;

            selectTag.appendChild( opt );           
        }
    }
}

Answer 2

In the If statement Use == instead of =. For adding an option auto to the select append that before your for loop.You have created the option but forgot to append the option.Use selectTag.appendChild(auto); befor the for loop

 fillWirelessChannel();

function fillWirelessChannel(){
            var index;
            var selectTag= document.getElementById('wirelessChannel');                       selectTag.options.length = 0; /* wireless should */
            selectTag.options.length = 0; 
            var auto = document.createElement("option");
            auto.value= 'auto';
            auto.innerHTML = 'auto';
            selectTag.appendChild(auto);     
            console.log(document.getElementById('country').value);
            
            if (document.getElementById('country').value=="1") {
                  for(index=4920; index<=5825; index+=5){
                      var opt = document.createElement("option");
                      opt.value= index;
                      opt.innerHTML = index;     
                      selectTag.appendChild(opt);         
                  }
              } else if(document.getElementById('country').value=="2"){               
                  for(index=4920; index<=6075; index+=5){
                      var opt = document.createElement("option");
                      opt.value= index;
                      opt.innerHTML = index;       
                      selectTag.appendChild(opt);           
                  }
              }
        }

<select id="wirelessChannel">
</select>

<select id="country" onchange="fillWirelessChannel()">
 <option value="1">1</option>
 <option value="2">2</option>
</select>