Javascript 为selectjquery创建选项_Javascript_Html_Jquery

Javascript 为selectjquery创建选项

javascript html jquery

Javascript 为selectjquery创建选项,javascript,html,jquery,Javascript,Html,Jquery,我想使用JQuery或JS创建两个值为“electro”和“auto”的选项。Select的名称为“butterbean\u stm\u car\u manager\u setting\u autofilling”，我已经编写了这部分代码： <script> function addOption() { select = document.getElementsByName('butterbean_stm_car_manager_setting_autofilling'); for(

我想使用JQuery或JS创建两个值为“electro”和“auto”的选项。Select的名称为“butterbean\u stm\u car\u manager\u setting\u autofilling”，我已经编写了这部分代码：

<script>
function addOption() {
select = document.getElementsByName('butterbean_stm_car_manager_setting_autofilling');
for(var i=0; i<select.length; i++){
    var opt = document.createElement('option');

}
}
</script>

您可以尝试以下方法：

document.addEventListener'DOMContentLoaded'，事件=>{ 函数添加选项{ 变量optionArr=['electro'，'auto']； var select=document.getElementsByName'butterbean\u stm\u car\u manager\u setting\u autofilling'[0]；

forvar i=0；i您可以尝试以下方法：

forvar i=0；i这可以通过两种不同的方式来完成，即使只使用普通的JavaScript

如果只有一个select，则不需要使用与指定名称匹配的任何select元素的for循环。相反，让我们创建一个包含所有要用于选项的值的数组，并循环使用这些值来创建新选项。我们甚至不需要使用函数，尽管如果愿意，您当然可以：

1.使用.forEach循环使用.forEach数组方法，我们可以轻松地循环遍历数组项：

常量选项=['electro'，'auto']； const select=document.getElementsByName'butterbean\u stm\u car\u manager\u setting\u autofilling'[0]； options.forEachoption=>select.insertAdjacentHTML'beforeend'，`${option}`；

这可以通过两种不同的方式来实现，即使只是使用普通的JavaScript

1.使用.forEach循环使用.forEach数组方法，我们可以轻松地循环遍历数组项：

使用Jquery的整个示例如下：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
                integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
                crossorigin="anonymous"></script>
    </head>
<body>

<select id="butterbean_stm_car_manager_setting_autofilling"></select>

<script>
    $(document).ready(function () {
        function addOption() {
            var options = ['electro', 'auto'];
        
            options.forEach(element => {
                $('#butterbean_stm_car_manager_setting_autofilling')
                .append($('<option></option>')
                        .attr('value', element)
                        .text(element));
            });
        }

        addOption();
    });
</script>

</body>

</html>

使用Jquery的整个示例如下：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
                integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
                crossorigin="anonymous"></script>
    </head>
<body>

<select id="butterbean_stm_car_manager_setting_autofilling"></select>

<script>
    $(document).ready(function () {
        function addOption() {
            var options = ['electro', 'auto'];
        
            options.forEach(element => {
                $('#butterbean_stm_car_manager_setting_autofilling')
                .append($('<option></option>')
                        .attr('value', element)
                        .text(element));
            });
        }

        addOption();
    });
</script>

</body>

</html>

问题/问题是什么？你似乎有一个部分解决方案，没有需要帮助的真正细节。嘿，Alex，我在我的解决方案中提供了一些不同的方法，forEach和for..of，选项包括数组相同值和文本，分别为第1部分和第2部分，以及对象值和关联文本，分别为第3.1部分和第3.2部分。如果您也想要jQuery解决方案，请告诉我。很高兴添加！问题是什么？您似乎有一个部分解决方案，没有需要帮助的真正细节。嘿，Alex，我在我的解决方案中提供了一些不同的方法，forEach和for..of，选项为数组相同的值和文本，第1部分和第2部分分别为aNDA对象值与关联文本，分别为第3.1部分和第3.2部分。如果您还想要jQuery解决方案，请告诉我。很高兴添加！控制台错误：未捕获类型错误：无法读取的属性“add”undefined@Alex，我想您错过了document.getElementsByName'butterbean\u stm\u car\u manager\u setting\u autofilling'中的索引[0]1.实际上我没有t@Alex您的代码中是否有多个同名的select元素？如果没有，则[0]使用可能有意义。如果您正在并且希望在所有选项中使用相同的选项，则是的，我们可能希望循环选择元素以及选项数组。它正在工作，谢谢解决方案错误：未捕获类型错误：无法读取的属性“add”undefined@Alex，我想您错过了索引[0]在document.getElementsByName'butebean\u stm\u car\u manager\u setting\u autofilling'[0]中，我实际上没有t@Alex您的代码中是否有多个同名的select元素？如果没有，则[0]使用可能有意义。如果您正在并且希望在所有选项中使用相同的选项，那么是的，我们可能希望循环选择元素以及选项数组。它正在工作，thanksHi，@Brandon McConnell，在您的每个解决方案中，我都有一个错误：解析错误：语法错误，意外的“$”，预期的“，”或“；“我发现了一个错误，我在代码中也使用了echo。我想到了未捕获的TypeError:无法读取的属性'insertAdjacentHTML'undefined@Alex如果单击上面的“运行”，上面的每个活动代码段都会正常运行。可能发生的情况是，模板文本中的美元符号抛出错误，因为它与jQuery冲突。这可能会让我感到惊讶，但这是可能的。你能发布一个链接到你的代码，我可以在那里查看和检查这个问题-CodePen、CodeSandbox或类似的东西吗？@Alex你收到的新错误一定意味着找不到select。你知道吗

u确保在选择器的末尾包含[0]索引？它应该是const select=document.getElementsByName'butebean\u stm\u car\u manager\u setting\u autofilling'[0]；由于没有[0]，变量将保存整个匹配的节点列表，而不仅仅是一个元素。不，我保留了您编写的所有内容，并将脚本放在底部，但错误没有解决。I，@Brandon McConnell，在您的每个解决方案中，我都有一个错误：解析错误：语法错误，意外的“$”，预期的“，”或“；”我发现了一个错误，我对你做了echo，并且在你的代码中也做了。我想到了未捕获的TypeError：无法读取的属性'insertAdjacentHTML'undefined@Alex如果单击“在上面运行”，则上面的每个活动代码段都不会出现问题。可能发生的情况是，模板文本中的美元符号抛出了一个错误，因为它与jQuery冲突。这会让我感到惊讶，但这是可能的。你能发一个链接到你的代码吗？我可以在那里查看和检查这个问题-CodePen、CodeSandbox或类似的东西？@Alex你收到的新错误一定意味着没有找到select。是否确保在选择器的末尾包含[0]索引？它应该是const select=document.getElementsByName'butebean\u stm\u car\u manager\u setting\u autofilling'[0]；因为没有[0]，变量将保存整个匹配的节点列表，而不仅仅是一个元素。不，我保留了您编写的所有内容，并将脚本放在底部，但错误没有得到解决