-1

質問があり、この問題を解決する方法を検索しましたが、簡単で必要なものに似たものを見つけました。次のようになります。

ユーザーがコンボボックス フォーム フィールドのオプションを選択するフォームが必要です。

例: オプション 1 を選択 フィールド 1、フィールド 2、およびフィールド 3 が表示されて入力されます オプション 2 を選択すると、フィールド 4、フィールド 5、およびフィールド 6 が入力されて表示されます

そして、submit がオプション 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 と一致するようにしました。

そうすれば、わずかに変更して、1 つのページで複数のオプションの選択を処理することができます。

デモはこちら: 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 に答える