用javascript填充下拉列表

我有两个下拉列表。这两个不是相互依赖的。用javascript填充下拉列表

第一个下拉列表中的值是[ 'one', 'two', 'three', 'four' ]。
第二个下拉列表中的值为[ 'ten', 'nine', 'eight', 'seven' ]。
如果我在第一个下拉列表中选择two，则应该使用nine自动填充第二个下拉列表。

我试过这个。

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

但我没有得到预期的结果。在这方面请帮助我。

来源

2014-04-21 user3483944

的您需要添加事件处理程序上的第一选择事件'change'。在那里你定义了一个函数，当用户改变第一个选择器的值时，它将被浏览器执行。你可以在那里定义你的代码来编程改变第二选择器的选定值，就像你在代码中做的那样。 – setec

*** [这是一个很好的例子]（http://www.javascriptkit.com/javatutors/selectcontent2.shtml）*** – Bhavik

试试这个

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>

脚本

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

DEMO

来源

2014-04-21 09:03:39

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

来源

2014-04-21 09:08:21 setec

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

来源

2014-04-21 09:09:54

您必须将onchange事件添加到第一个下拉列表中并调用一个函数，并且必须更改第二个下拉列表的值。

下面的代码

<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>

祝您好运

来源

2014-04-21 09:16:47

用javascript填充下拉列表

回答

相关问题