javascript - 如何动态添加基于另一个标签价值？

Question

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

我已经搜索并找到了一种使用 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 的值的第一个字段。有什么建议吗？

Answer 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 );
}

Answer 2

如果您可以使用 jQuery：

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

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

Answer 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 做更多事情，然后我在这里展示的内容包括使用来自服务器，很难在小提琴中展示所有这些。

Answer 4

最好的方法是在 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>