从动态创建选项中设置选项“选定”属性-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要动态地创建下拉列表或单选框等控件，并根据一些条件对其中的选项进行预选或者默认选中。本文将介绍如何从动态创建的选项中设置选项“选定”属性。

添加“选定”属性

首先，我们需要了解每个选项的HTML结构，以便于添加“选定”属性。例如，一个单选框的HTML结构应该类似于：

<input type="radio" name="gender" value="male"> Male

我们可以通过JavaScript代码获取到这个input元素，然后设置它的checked属性为true即可选中该选项。

var radio = document.querySelector('input[value="male"]');
radio.checked = true;

同样地，对于下拉列表，我们可以通过以下方式获取其中的一个选项并设置其选中状态：

<select id="city">
  <option value="Beijing">北京</option>
  <option value="Shanghai">上海</option>
  <option value="Guangzhou">广州</option>
</select>

var citySelect = document.getElementById("city");
var guangzhouOption = citySelect.querySelector('option[value="Guangzhou"]');
guangzhouOption.selected = true;

动态创建选项

有时候，我们需要在页面加载完成之后再动态地创建选项，并设置其中的某一个选项为默认选中。我们可以使用createElement()和appendChild()方法来实现。

例如，我们需要根据一个数组动态创建下拉列表，并默认选中其中的一个值：

<select id="fruits"></select>

-- -------------------- ---- -------
--- ------ - --------- --------- ----------
--- ----------- - ----------------------------------

--- ---- - - -- - - -------------- ---- -
  --- ------ - ---------------------------------
  ------------ - ----------
  ----------- - ----------

  -- ---------- --- --------- -
    --------------- - -----
  -

  --------------------------------
-

上述代码会动态地创建一个下拉列表，并将其中的“banana”选项设置为默认选中。

总结

本文介绍了如何从动态创建的选项中设置选项“选定”属性。无论是单选框还是下拉列表，我们都可以通过JavaScript代码控制选项的选中状态，实现更灵活的用户交互。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/14263