0

最初のドロップダウンでオプションが選択されたら、別のドロップダウン リストをフォームに追加しようとしています。

したがって、以下はフォームの一部です。名前付きのドロップダウンを選択すると、この場合、EDMATH 502、EDTECH 401、Math 101 の 3 つのクラスがあり、次のドロップダウン ("image_os_image_id") に異なるイメージ ID が表示されるようにします。各クラスが異なる画像にアクセスできるという考えです。

これがjqueryの仕事であることは知っていますが、その方法を理解するのにかなりの時間を費やしています。私はかなりの数を検索しましたが、検索が不十分であるか、別のリストを追加するのではなく、リストに別のオプションを追加するためのヒットが常に出てくるように見えるという事実のいずれかによって、少し困惑しています。

<div class="control-group">
    <label class="control-label" for="select01">Class</label>
    <div class="controls">
        <select id="select01" name="class_name">
            <option value='EDMATH 502'>EDMATH 502</option>
            <option value='EDTECH 401'>EDTECH 401</option>
            <option value='Math 101'>Math 101</option>
        </select>
    </div>
    <!-- class -->
</div>
<div class="control-group" </div>
    <label class="control-label" for="select01">Image</label>
    <div class="controls">
        <select id="select01" name="image_os_image_id">
            <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option>
            <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option>
            <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option>
            <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option>
        </select>
    </div>
    <!-- image -->
</div>
<!-- control group -->

助けてくれてありがとう！

4

1 に答える 1

1
  1. こんにちは、最初に 2 番目の選択 ID を「select01」から「select02」に変更します。ID は一意である必要があります
  2. jqueryを含める

  3. スクリプトを追加する

        $(document).ready(function(){
        $('#select01').bind('change', function(){

            $('#select02 option').remove();

            switch($(this).val()) {
            case 'EDMATH 502':
                $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>');
                $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>');
                $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>');
                $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>');
                break;
            case 'EDTECH 401':
                $('#select02').append('<option value="test1">test1</option>');
                $('#select02').append('<option value="test2">test11</option>');
                break;
            case 'Math 101':
                $('#select02').append('<option value="test2">test2</option>');
                $('#select02').append('<option value="test22">test22</option>');
                break;
            }



        })
    });
于 2012-07-27T21:35:56.587 に答える