Question

我有一个问题，我搜索了如何解决这个问题，但我找到了一些容易和类似于我想要的东西，它将是以下内容：

我需要一个表单，用户在组合框表单字段中选择一个选项。

例如：选择选项1 显示字段1，字段2和字段3以填充选择选项2 字段4，字段5和字段6似乎填充

当提交标识自己填充了选项1或选项2的字段时

示例HTML：

<select id="option_selector" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
<div id="options">
    <div id="option1">
        <input type="text" name="input1" value="Input 1" />
        <input type="text" name="input2" value="Input 2" />
        <input type="text" name="input3" value="Input 3" />
    </div>
    <div id="option2">
        <input type="text" name="input4" value="Input 4" />
        <input type="text" name="input5" value="Input 5" />
        <input type="text" name="input6" value="Input 6" />
    </div>
</div>

任何人都知道任何教程或可以指出我该怎么办？

感谢

Answer 1

最近这样的事情发生了。这将做你想要的。

我这样做是为了使select的名称与选项div的id匹配，并且选项的值与各个section包装器的id匹配。

这样，您可以稍微改变它以在单个页面上使用多个可选选项。

在此演示：http://jsfiddle.net/GUCtC/

<select id="option_selector" name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
<div id="options">
    <div id="option1">
        <input type="text" name="input1" value="Input 1" />
        <input type="text" name="input2" value="Input 2" />
        <input type="text" name="input3" value="Input 3" />
    </div>
    <div id="option2">
        <input type="text" name="input4" value="Input 4" />
        <input type="text" name="input5" value="Input 5" />
        <input type="text" name="input6" value="Input 6" />
    </div>
</div>
<script type="text/javascript">
        $('#option_selector').change(refresh_inputs);
        refresh_inputs();
        function refresh_inputs() {
            var name = $('#option_selector').attr('name');
            var val = $('#option_selector').val();
            $('#'+name+' div').hide();
            $('#'+val).show();
        }
</script>

基于选择框的带有可选字段的动态表单

1 个答案: