Populating dropdown list with javascript

Question

I have two dropdown list. These two are not interdependent on each other.

The values in the first dropdown list are [ 'one', 'two', 'three', 'four' ].
The values in second dropdown are [ 'ten', 'nine', 'eight', 'seven' ].
If I select two in the first dropdown then second dropdown should be auto-populated with nine.

I have tried this.

var value1=document.getElementById('ddlone').value;
if(vaue1=='two'){
    document.getElementById('ddlone').selectedValue='nine';
} else {
    document.getElementById('ddlone').selectedValue='';
}

But I didn't get the expected result. Please help me in this regard.

You need to add event handler for event change on first select. There you define a function which will be executed by browser when user changes value of first selector. And you can define your code there to programmaticaly change selected value of second selector, like you did in your code. — setec
– setec, Commented Apr 21, 2014 at 9:00

Sridhar R · Accepted Answer · 2014-04-21 09:03:39Z

1

Try this

HTML

<select id="first">
    <option>select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<select id="second">
    <option>select</option>
    <option>10</option>
    <option>9</option>
    <option>8</option>
    <option>7</option>
</select>

Script

$(document).ready(function () {
    $('#first').on('change', function () {
        var vall = $(this).find('option:selected').index()
        $('#second').find('option').eq(vall).prop('selected', true)
    });
});

DEMO

answered Apr 21, 2014 at 9:03

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

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

Comments

setec · Accepted Answer · 2014-04-21 09:08:21Z

0

HTML:

<select id="sel1">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
<select id="sel2">
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">eight</option>
</select>

Javascript:

$(function(){
    $("#sel1").on('change', function(){
        var value = $(this).val();
        if( value == '2' ){
            $("#sel2").val('7');
        }
    });
});

example

answered Apr 21, 2014 at 9:08

setec

16.2k3 gold badges39 silver badges51 bronze badges

Comments

Satish Sharma · Accepted Answer · 2014-04-21 09:09:54Z

HTML :

<select id="first" onchange="change_second(this.value);">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    <option value="four">four</option>
</select>


<select id="second">
     <option value="ten">ten</option>
    <option value="nine">nine</option>
    <option value="eight">eight</option>
    <option value="seven">seven</option>

</select>

JS :

function change_second(val)
{
    var elmnt1 = document.getElementById('first');    
    var elmnt2 = document.getElementById('second');

    var desired_index = 0;
    for(var i=0; i < elmnt1.options.length; i++)
    {
          if(elmnt1.options[i].value === val) {
          desired_index = i;
          break;
        }
     }

    elmnt2.selectedIndex = desired_index;

}

SEE fiddle Demo

vinod kumar · Accepted Answer · 2014-04-21 09:16:47Z

You have to add an onchange event to the first drop down and call one function and have to change the value of second drop down.

Here the code

<html>
 <script>
 function populatedrop2(){
  var value= document.getElementById("drop1").value;
  if(value == "two"){
   document.getElementById("drop2").value = "nine";
  }
}
 </script>
 <body>
   <select id="drop1" onchange=populatedrop2();>
     <option value="one">one</option>
     <option value="two">two</option>
     <option value="three">three</option>
     <option value="four">four</option>
   </select>

   <select id="drop2">
     <option value="seven">seven</option>
     <option value="eight">eight</option>
     <option value="nine">nine</option>
     <option value="ten">ten</option>
   </select>

 </body>
</html>

Best of Luck

Collectives™ on Stack Overflow

Populating dropdown list with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related