Question

我所做的是

var select  = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;

上面的代码的最后一行没有任何作用，我仍然得到option1作为所选选项。我在这里想念什么？

Answer 1

您需要将select附加到正文中。它还有助于向option添加一些文本：

var select  = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;

我还添加了第三个选项，以表明option2.selected = true被尊重

Answer 2

将value和innerHTML属性添加到选择中。并解决错字

var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;

select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)

<div id='test'></div>

Answer 3

您需要添加“ select [1] .selected = 1;”输入您的代码，请检查以下代码。这段代码对我有用。

    var myDiv = document.getElementById("myDiv");

    //Create array of options to be added
    var array = ["Volvo","Saab","Mercades","Audi"];

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.setAttribute("id", "mySelect");
    myDiv.appendChild(selectList);

    //Create and append the options
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", array[i]);
        option.text = array[i];
        selectList.appendChild(option);
    }
   selectList[2].selected  =1;

HTML选择选项：将selected属性设置为input元素无效

3 个答案: