用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填充下拉列表

回答

相關問題