我的代码中有一些选择,但它们都有相同的选项:
<select id ="pais">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
Localidade
<select id ="localidade">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
Morada
<select id ="morada">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
为什么我不能每次都重复这些值?比如定义一次并将它们用于所有其他选择id?
顺便说一句,除了html之外我还使用javascript。
答案 0 :(得分:1)
我使用此功能来填充我的选择:
function fillSelect(element, dataList){
element = (typeof element === 'string' ? document.getElementById(element) : element);
for (var i = 0; i < dataList.length; i++) {
element.options[element.length] = new Option(dataList[i].Value, dataList[i].Key);
}
}
用法:
var selectData = [{Key:'A',Value:'A'},{Key:'B',Value:'B'},{Key:'C',Value:'C'}];
fillSelect('pais',selectData);
fillSelect('localidade',selectData);
答案 1 :(得分:1)
快捷方便: 首先清空你的表单,然后像这样定义它们:
<select id ="morada"></select>
,其他的相同,那么:
var optionArray = ["A", "B", "C", "D", "E", "F"];
var strOut ="";
for(var i=0; i<optionArray.length;i++){
strOut += '<option value=" ' + optionArray[i] + ' "> ' + optionArray[i] + '</option>';
}
$("#pais").html(strOut);
$("#morada").html(strOut);
$("#localidades").html(strOut);
EDIt:似乎A1rPun给出了比我更好的答案;)
答案 2 :(得分:0)
创建一个重复的值数组,并在select语句中运行for循环,并通过数组值为option tag的value属性赋值。
<body onload="myFunction()">
<select id="demo1">
</select>
<select id="demo2">
</select>
<script>
function myFunction()
{
var select1 = document.getElementById("demo1");
var select2 = document.getElementById("demo2");
var i=0;
var val= ["A","B","C","D"];
for(i=0;i<val.length ;i++){
select1.options[select1.options.length] = new Option(val[i],val[i]);
select2.options[select2.options.length] = new Option(val[i],val[i]);
}
}
</script>
</body>
</body>
答案 3 :(得分:0)
循环选择元素以填充它们。在添加每个选项元素的函数中定义静态数据。
编辑:使用'new Option'结构作为A1rPun使用,是一个比这里使用的createElement更好的选择。
请参阅fiddle
var selects = ["localidade", "pais"];
var selectLength = selects.length;
for(var s = 0; s < selectLength; s++) {
addOptions(selects[s]);
}
function addOptions(selectName){
var selectData = [{Key:'A',Value:'A'},{Key:'B',Value:'B'},{Key:'C',Value:'C'}];
var sel = document.getElementById(selectName);
if (sel != undefined) {
var arrayLength = selectData.length;
for (var i = 0; i < arrayLength; i++) {
var opt = document.createElement('option');
opt.text = selectData[i].Key;
opt.value = selectData[i].Value;
sel.add(opt);
}
}
}
答案 4 :(得分:0)
以下在表格中生成编号选项select。 @ AirPun的答案是一种更现代的方法。
<tr>
<td align="center" id="tableShow"></td>
</tr>
function tableNumbers() {
var i = 0;
var selectText = "";
selectText += '<select name="tableNums" id="tableNum" size="1" onChange="storeTable()">' + "\n";
for (i = 0; i<=20 ; i++) {
selectText += "<option value="+'"'+i+'"'+">"+i+"</option>" + "\n";
}
selectText += "</select>";
document.getElementById('tableShow').innerHTML = selectText;
}