Append 选项到 select 并设置所选选项

Question

我正在以编程方式创建一个带有几个选项的select元素。 我想选择一个特定的选项。 为此，我使用option.selected = true 。 我也试过option.selected = 'selected' 。

这是我的代码：

let select_menu_for_sequence = document.createElement("select");
select_menu_for_sequence.classList.add("sequence");


for (i = 1; i <= 4; i++) {
    let option = document.createElement("option");
    option.text = i;

    if (i == 2) {
        option.selected = true;
    }

    select_menu_for_sequence.appendChild(option);
}

console.log(select_menu_for_sequence.outerHTML)

Output：

<select class="sequence">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

预计 output：

<select value="2" class="sequence">
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
    <option>4</option>
</select>

我真的找不到我做错了什么。

Answer 1

您可以使用 setAttribute() 方法。 它只需要两个 arguments：您要添加的属性及其值。

for (i = 1; i <= 4; i++) {
    let option = document.createElement("option");
    option.text = i;

    if (i == 2) {
        option.setAttribute('selected','');
    }

    select_menu_for_sequence.appendChild(option);
}

要么

option.setAttribute('selected','true');

Answer 2

更新

为了在 HTML 中看到“已选择”，请使用属性方法而不是将其视为带有点符号的属性。

select.options[2].toggleAttribute("selected");

在selected上使用点符号使其成为 HTML 中未显示的属性，但很明显.option[2]已被选中。

select.options.selectedIndex = 2;

我认为您忽略了 append 和 select 到<body>或文档上的任何内容。

 const select = document.createElement("select"); select.classList.add("sequence"); document.body.append(select); for (let i=1; i < 5; i++) { let option = document.createElement("option") option.textContent = i select.append(option); } //select.options.selectedIndex = 2; select.options[2].toggleAttribute("selected"); console.log(select.outerHTML);

Answer 3

检查这个

let select_menu_for_sequence = document.createElement("select");
select_menu_for_sequence.classList.add("sequence");

for (i = 1; i <= 4; i++)

    select_menu_for_sequence.options[select_menu_for_sequence.options.length]=new Option(i, i);
    
    if (i == 2)
        select_menu_for_sequence.options[select_menu_for_sequence.options.length]=new Option(i, i,true,true);

console.log(select_menu_for_sequence)

Answer 4

将<select>元素的值设置为所选选项的值。

select_menu_for_sequence.value = 2;

Append 选项到 select 并设置所选选项

问题描述

4 个解决方案

解决方案1
3 已采纳 2022-12-26 22:06:02

解决方案2
2 2022-12-26 22:08:44

更新

解决方案3
1 2022-12-26 22:15:57

解决方案4
0 2022-12-26 22:07:41

Append 选项到 select 并设置所选选项

问题描述

4 个解决方案

解决方案1 3 已采纳 2022-12-26 22:06:02

解决方案2 2 2022-12-26 22:08:44

更新

解决方案3 1 2022-12-26 22:15:57

解决方案4 0 2022-12-26 22:07:41

解决方案1
3 已采纳 2022-12-26 22:06:02

解决方案2
2 2022-12-26 22:08:44

解决方案3
1 2022-12-26 22:15:57

解决方案4
0 2022-12-26 22:07:41