-1

我有一个问题，我搜索了如何解决这个问题，但我发现了一些简单且与我想要的类似的东西，如下所示：

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

例如：选择选项 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>

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

谢谢

4

1 回答 1

3

最近在工作中做了这样的事情。这将做你想要的。

我这样做是为了使 select 的名称与选项 div 的 id 匹配，并且选项的值与各个部分包装器的 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>
于 2012-11-27T01:47:11.783 回答