如何根据另一个 <select> 值动态添加 <select> 标签？答案

【问题标题】：How do I dynamicly add <select> tags based on another <select> value?如何根据另一个 <select> 值动态添加 <select> 标签？
【发布时间】：2012-12-19 07:03:39
【问题描述】：

对于注册表单，我正在寻找一种方法，根据用户在表单域中选择的数字 (#) 为用户提供更多选项。

我已经搜索并找到了一种使用 javascript 执行此操作的方法，但它不允许标记，但它确实接受等，但不是下拉菜单字段。

 <fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
                    <div>
                        <label for="vmammount">Order # VM's</label>
                        <select name="vmammount" required="required">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">3</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>                        
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div>
                        <label for="vmos">VM OS 1</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
<div>
                        <label for="vmos">VM OS 2</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
                </fieldset>

OS 1 字段始终可见，随后的其他选择字段取决于用户选择从 1 到 10 的值的第一个字段。有什么建议吗？

【问题讨论】：

你的措辞有点不清楚。您是否希望创建一个带有
对不起。对，那是正确的。所以我希望用户选择一个我用

标签： javascript forms select dynamic

【解决方案1】：

你可以试试这个，http://supunk.blogspot.se/2009/01/creating-select-list-using-javascript.html

这是一些稍微修改的代码

var numSelects = 3; //change this to the value of the first select
var foo = document.getElementById("fooBar");
for(var i = 0; i <= numSelects; i++)
{
/* create select */
var select = document.createElement("select");
select.setAttribute("name", "mySelect_" + i);
select.setAttribute("id", "mySelect_" + i);
select.style.width = "300px";

var option;

for( var j = 0; j <= 5; j++ )
{
 /* we are going to add two options */
 /* create options elements */
 option = document.createElement("option");
 option.setAttribute("value", "value_" + i "_" + j);
 option.innerHTML = "Text #" + j + " in box #" + i "!";
 select.appendChild(option);
 }
 foo.appendChild( select );
}

【讨论】：

我想我问错了问题和/或发布了错误的代码，抱歉。 :( 我已经编辑了我的原始帖子。感谢您到目前为止的想法！它仍然无法正常工作
你的意思是要根据第一个select的输入创建N个selects？在这种情况下，我已经更新了代码。

【解决方案2】：

最好的方法是在 HTML / PHP 中创建所有 os 选择元素...但仅在必要时显示它们。这里是一个使用 jQuery 的示例，它也可以使用纯 javascript，但需要至少 10 倍的 mutch 代码行。

http://jsfiddle.net/vuPwM/2/

<fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
        <div>
            <label for="vmammount">Order # VM's</label>
            <select name="vmammount" id="vmammount" required="required">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">3</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div id="vmos_block">
            <div class="vmos" id="vmos_block_1">
                <label for="vmos_1">VM OS 1</label>
                <select name="vmos[1]" id="vmos_1" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_2">
                <label for="vmos_2">VM OS 2</label>
                <select name="vmos[2]" id="vmos_2" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_3">
                <label for="vmos_3">VM OS 3</label>
                <select name="vmos[3]" id="vmos_3" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_4">
                <label for="vmos_4">VM OS 4</label>
                <select name="vmos[4]" id="vmos_4" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>
        </div>
</fieldset>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $('.vmos').hide();

    $("#vmammount").change(function () {
        $('.vmos').hide();

        if ($(this).val() < 1) {
            return false;
        }

        for (var i = 1; i <= $(this).val() ; i++) {
              $('#vmos_block_' + i).show();          
        }

        return true;
    });
});//]]>  

</script>

【讨论】：

我想我问错了问题和/或发布了错误的代码，抱歉。 :( 我已经编辑了我的原始帖子。感谢您到目前为止的想法！它仍然无法正常工作
@user1949628 我更改了答案以匹配您的新问题。

【解决方案3】：

我可能不理解您的问题，但您可以使用 Knockout.js 之类的框架轻松完成此操作，该框架允许您定义客户端视图模型来处理注册表单的状态。

查看模型

var ViewModel = function () {
    var self = this;

    this.vmaValue = ko.observable(1);
    this.vmaOptions = ko.observableArray([1, 2, 3, 4, 5]);
}

ko.applyBindings(new ViewModel());

标记

<select data-bind="options: vmaOptions, value: vmaValue"></select>

<!-- ko if: vmaValue() === 1 -->
<div>
    <label for="vmos">VM OS 1</label>
    <select name="vmos" required="required">
        <option value=""></option>
        <option value="1">Windows Server 2008</option>
        <option value="2">Windows XP</option>
        <option value="3">Debian</option>
        <option value="4">CentOS</option>
    </select>
</div>
<!-- /ko -->

<!-- ko if: vmaValue() === 2 -->
<div>
    <label for="vmos">VM OS 2</label>
    <select name="vmos" required="required">
        <option value=""></option>
        <option value="1">Windows Server 2008</option>
        <option value="2">Windows XP</option>
        <option value="3">Debian</option>
        <option value="4">CentOS</option>
    </select>
</div>
<!-- /ko -->

这是一个小提琴：http://jsfiddle.net/vEQ9d/ 请注意，此示例已大大简化，您可以使用 Knockout 做更多事情，然后我在这里展示的内容包括使用来自服务器的 JSON 响应动态构建操作系统下拉菜单，这只是很难在小提琴中展示所有这些。

【讨论】：

【解决方案4】：

如果你可以使用 jQuery：

$("#labelID").change(function(){
    switch($(this).val()){
        case "1":
            $("#VMOS1").show();
            break;
        case "2":
            $("#VMOS2").show();
            break;
    }
})

这只是一个粗略的示例，您应该向元素添加 id 和类。

【讨论】：