使用JavaScript填充下拉列表
[英]Populating dropdown list with 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='';
}
但是我沒有得到預期的結果。 請在這方面幫助我。
4 個解決方案
解決方案1
1 2014-04-21 09:03:39
嘗試這個
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)
});
});
解決方案2
0 2014-04-21 09:08:21
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');
}
});
});
解決方案3
0 2014-04-21 09:09:54
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;
}
查看小提琴演示
解決方案4
0 2014-04-21 09:16:47
您必須在第一個下拉列表中添加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>
祝你好運
高效填充下拉列表：Javascript vs數據庫（Mysql-Django）
[英]Efficiently Populating Dropdown List: Javascript vs Database (Mysql-Django)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.