在 JavaScript 中设置选定的选项

Shraddha Paghdar 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 document.getElementById() 设置选择元素
  2. 在 JavaScript 中使用 document.querySelector() 设置选择元素
在 JavaScript 中设置选定的选项

select 是一个 HTML 输入元素,用于指定下拉选项列表,用户可以从中选择任何选项。在今天的帖子中,我们将学习如何在 JavaScript 中设置此 HTML 元素的值。

在 JavaScript 中使用 document.getElementById() 设置选择元素

JavaScript 提供的这个内置 document 方法返回其 id 与指定的 id 匹配的元素对象。实际值由行 element.value = 'NEW_VALUE' 设置。

语法

document.getElementById($id);

参数

$id:它是一个强制参数,指定必须匹配的 HTML 属性的 id

返回值

如果找到对应的元素,则返回对应的 DOM 元素对象;否则,它返回 null

示例代码:

<select id="osDemo">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.getElementById('osDemo').value = 'MacOS'">
Click to Update to MacOS.
</button>

输出:

之前使用 id 在 JS 中设置选定的选项

使用 id 之后在 JS 中设置选定的选项

在 JavaScript 中使用 document.querySelector() 设置选择元素

这是 JavaScript 提供的内置 document 方法,返回其 selector 与指定选择器匹配的元素对象。querySelector()querySelectorAll() 之间的唯一区别是第一个是单个匹配元素对象,然后返回匹配元素的所有对象。如果传递了无效的选择器,则会发出 SyntaxError。实际值由 element.value = 'NEW_VALUE' 行设置

语法

document.querySelector($selector);

参数

$selector:它是一个强制参数,用于指定 classid 的匹配条件。此字符串必须是有效的 CSS 选择字符串。

返回值

返回 DOM 中满足选择器条件的第一个匹配元素对象。

示例代码:

<select id="osDemo" class="osDemoClass">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.querySelector('.osDemoClass').value = 'MacOS'">
Click to Update to MacOS.
</button>

输出:

之前使用选择器在 JS 中设置选定的选项

使用选择器在 JS 中设置选定的选项之后

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn