如何使用数组分配下拉选项值
How to assign drop-down option value with array
我的脚本中有这样的数组:
var TypeList = {
'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
}
但我想从下拉选项中添加值,如下所示:
Option One
Value: Any Text: Any
Value: 1 Text: Abigail
Value: 3 Text: Adam
Value: 4 Text: Jake
Value: 5 Text: Michael
Option Two
Value: Any Text: Any
Value: 6 Text: Gavin
Value: 7 Text: Amanda
Value: 8 Text: Donna
Value: 9 Text: Irene
Option Three
Value: Any Text: Any
Value: 10 Text: Sarah
Value: 11 Text: Nicholas
Value: 12 Text: Ellison
Value: 13 Text: Cornish
Value: 14 Text: Neil
Option Four
Value: Any Text: Any
Value: 15 Text: Rebecca
Value: 16 Text: Sophie
Value: 17 Text: Yvonne
Value: 18 Text: William
Value: 19 Text: Hill
我当前的代码:
<!doctype html>
<html>
<head>
<title>Custom Styled Selectbox</title>
<link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" />
</head>
<body class="noJS">
<script type="text/javascript">
try{Typekit.load();}catch(e){}
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<div class="grid-system clearfix">
<div class="row">
<div class="col span-9">
<div class="example clearfix">
<select class="custom interactive" id="properties">
<option value="One" selected>One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select class="custom interactive" id="TypeList">
<option selected>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"></script>
<script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"></script>
<script type="text/javascript">
$(function() {
window.prettyPrint && prettyPrint()
/*
This is how initialization normally looks.
Typically it's just $("select.custom"), but to make this example more clear
I'm breaking from the pattern and excluding interactive
*/
var sb, sb2;
$("select.custom").not(".interactive").each(function() {
sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200
});
});
/*
Adding some extra functionality for "interactive" selects
*/
var TypeList = {
'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
}
var defaultSelectboxSettings = {
height: 150,
width: 150
};
var country_SB = null,
city_SB = null;
$("select.interactive").each(function() {
if ($(this).attr("id") == "properties") {
country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
selectbox: $(this),
changeCallback: function(val) {
if (TypeList[val]) {
city_SB.enable();
updateCities(val);
}
if (val == "selectone") {
city_SB.disable();
}
}
}));
} else if ($(this).attr("id") === "TypeList") {
city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
selectbox: $(this)
}));
}
});
updateCities($("#properties").val());
if ($("#properties").val() == "selectone") {
//city_SB.disable();
}
function updateCities(val) {
var $select = $("select#TypeList"),
html = "";
for (var i = 0; i < TypeList[val].length; i++) {
html += '<option>' + TypeList[val][i] + '</option>';
}
$select.html(html);
// HACK: chrome is too fast?
setTimeout(function() {
city_SB.sync();
}, 1);
}
});
</script>
</body>
</html>
我的代码参考链接Rob La Placa
有什么想法或建议吗?谢谢
试试这个:
JQuery:
var TypeList = {
'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
};
var counter = 1;
addFromArray(TypeList.One, "one");
addFromArray(TypeList.Two, "two");
addFromArray(TypeList.Three, "three");
addFromArray(TypeList.Four, "four");
function addFromArray(arrayItems, dropdown)
{
for(var i = 0; i < arrayItems.length; i++)
{
$("#" + dropdown).append("<option value='" + (i===0?"Any":counter) + "'>" + arrayItems[i] + "</option>");
if (i!==0)
counter++;
}
}
标记:
<select id="one"></select>
<select id="two"></select>
<select id="three"></select>
<select id="four"></select>
这只是一个基本的示例,但它将生成所需的HTML。
JsFiddle:http://jsfiddle.net/hescano/ehwme/3/
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 在循环中分配json值时,值被覆盖
- 动态分配GA增强型电子商务跟踪器
- 角度:动态分配ng选项,奇怪的行为
- Angularjs 选择选项 ng 选择为分配值选择空白选项
- 在<选项>或 .val() 中为国家/地区分配值
- 如何将选定的值分配给没有值的选项 - javascript
- 如何使用数组分配下拉选项值
- 如何在php变量中分配html选项选择值
- 单击导航选项卡时分配jQuery功能
- 如何存储数据并根据另一个选择值分配选择选项
- 如果我选择了true值,则通过jQuery将其分配给其他选择选项
- 如何将不同的数据目标分配给不同的选项值,从而显示不同的模型
- 如何从json解析数组中分配选择选项的值
- 使用html选择选项分配javascript变量
- 如何删除选择标签的所有选项,并在javascript中分配一个新的项目列表来选择选项
- 动态分配Highcharts.图表选项noData
- 通过javascript分配选项来选择输入
- 当将选项的文本分配给隐藏输入时,如何从选择选项中删除HTML nbsp标记
- 在信息窗口中分配图像,并根据选项开关显示它们