Javascript 选择并选择选项值_Javascript_Html

Javascript 选择并选择选项值

javascript html

Javascript 选择并选择选项值,javascript,html,Javascript,Html,我的代码中有一些选项，但它们都有相同的选项： <select id ="pais"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option>

我的代码中有一些选项，但它们都有相同的选项：

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


A.
B
C
D
E
F
G
H
地方性
A.
B
C
D
E
F
G
H
莫拉达
A.
B
C
D
E
F
G
H

有没有什么简单的理由让我每次都不重复这些值？比如定义一次并将其用于所有其他id

顺便说一下，除了html之外，我还使用javascript

我使用此功能填充我的选择：

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

var optionArray=[“A”、“B”、“C”、“D”、“E”、“F”]；
var strOut=“”；
for（var i=0；i创建一个重复的值数组，并在select语句中运行for循环，并通过数组值将值赋给选项标记的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>


函数myFunction（）
{
var select1=document.getElementById（“demo1”）；
var select2=document.getElementById（“demo2”）；
var i=0；
var val=[“A”、“B”、“C”、“D”]；
for（i=0；i循环通过select元素来填充它们。在添加每个选项元素的函数中定义静态数据
编辑：使用“newoption”构造作为一个arpun，比这里使用的createElement好得多
看
var选择=[“localidade”，“pais”]；
var selectLength=selects.length；
对于（var s=0；s以下命令在表中生成一个编号选项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;

}


函数tableNumbers（）{
var i=0；
var selectText=“”；
选择文本+=''+“\n”；
对于（i=0；iYou可以使用字符串保存选项，并在pageload事件期间传递，具体取决于。选择纯HTML还是动态创建的？如果是纯HTML，您可以保留它。可以使用JavaScript创建它，但在这种情况下这不是必需的。只是一个警告，如果您从纯HTML更改为JavaScript，您将如果用户关闭了js，那么您的选项将不再有效，这会降低您的网站的可访问性。谢谢；）他没有使用jQuery。好吧，如果你详细说明这些问题，也许我可以解决它们？你的函数中有静态数据，而我在函数外部有静态数据，因为数据可能来自任何地方。addOption
可以用3行代码重写。我确实学到了一些东西，因为我不知道add函数estion确实提到了静态数据作为选择的源数据。同意您使用“Option”而不是“createElement”。在那里学到了一些东西。至于详细程度，要获得否决票有点苛刻，但还行。
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);
        }
    }
}

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

}