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

最好的方法是在HTML / PHP中创建所有操作系统选择元素...但只有在必要时才显示它们。这里有一个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>

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做更多的事情然后我在这里展示的内容包括使用来自服务器的JSON响应动态构建OS下拉列表，很难在小提琴中展示所有这些。

Answer 4

如果您对使用jQuery感到满意：

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

这只是一个粗略的例子，你应该为你的元素添加id和类。

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

4 个答案: