简介
在前端开发中，很多时候需要动态地添加元素到页面。其中之一就是添加选择框（select）元素。本篇文章将介绍如何通过编程方式添加选择框，并附带示例代码。
添加选择框
要通过编程方式添加选择框，需要使用 document.createElement() 方法创建一个新的 select 元素，然后使用 option 元素作为其子元素来添加选项。
以下是添加单选选择框的示例代码：
-- -------------------- ---- ------- -- -- ------ -- ----- ------ - --------------------------------- ----------- - ------------ --------- - ------------ -- ---- ----- ------- - --------------------------------- ------------- - --------- ------------ - ------ ----- ------- - --------------------------------- ------------- - --------- ------------ - ------ -- ------ ------ --- ---------------------------- ---------------------------- -- - ------ -------- ----------------------------------
在上面的代码中，我们首先使用 createElement() 方法创建了一个名为 select 的元素，并设置了其名称和标识符。接着，我们创建了两个 option 元素，并设置它们的值和文本。最后，我们将这两个选项添加到 select 元素中，并将 select 元素添加到文档主体中。
如果需要添加多选选择框，则可以将 select 元素的 multiple 属性设置为 true。
以下是添加多选选择框的示例代码：
-- -------------------- ---- ------- -- -- ------ -- ----- ------ - --------------------------------- ----------- - ------------ --------- - ------------ --------------- - ----- -- ---- ----- ------- - --------------------------------- ------------- - --------- ------------ - ------ ----- ------- - --------------------------------- ------------- - --------- ------------ - ------ -- ------ ------ --- ---------------------------- ---------------------------- -- - ------ -------- ----------------------------------
总结
本篇文章介绍了如何通过编程方式添加选择框。我们创建了一个新的 select 元素，并使用 option 元素添加了选项。这些示例代码可以帮助您更好地理解并学习如何在 JavaScript 中动态地添加元素到页面中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29812