0

フォームの前半からのユーザー入力に基づいて選択可能なオプションを持つ Web フォームを作成しようとしています。

私が行き詰まっているのは;

  • 入力タグ（type = text）を含むtdタグだけのテーブルルームタイプがあります。これらはユーザーによって記入されるので、それらが何であるかはわかりません..
  • このテーブルに余分な行を追加するボタンがあります (別の td タグと入力タグを追加するための Jquery)
  • ユーザーは必要なだけ行を追加します

フォームの次の部分では、部屋に入力し、各部屋のタイプを選択します。テーブル レイアウトは同じで (列が 1 つではなく 2 つであることを除いて)、Jquery の別のボタンを使用して行を追加します。

私ができるようにしたいのは、追加された新しい行がテーブルに2つの列を持つことです。1 つは入力テキスト フィールドで、もう 1 つは上記の表のオプションを含む選択ボックスです。

私はこれをある程度まで機能させることができました。しかし、ユーザーが元の (部屋の種類) テーブルからオプションを編集する可能性があるため、元のテーブルの現在の内容に基づいて値を調整する選択ボックスが必要です。

入力フィールドの 1 つにアクセスするたびに選択ボックスを空にして再入力することでこれを機能させることができます (OnBlur を使用しますが、これはおそらくこれを行う最も効果的な方法ではありません)。 -populates を選択すると、既に入力されている選択ボックスはすべてリセットされます。無効なオプション (つまり、元のテーブルに存在しない値) だけをリセットしたい。

私はこれを長い間見たり遊んだりしてきましたが、私のプログラミング能力は、以前にいくつかの非常に小さなことをいじりながら、こことグーグルから教えたものにすぎません...

私のHTMLコードはそのままです（コードの一部です。シンプルにするために無関係なコードをすべて削除しました）。

<div id="rm_types_info">
    <table id="room_types_table">
        <tr>
            <td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
        </tr>
    </table>

    <button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>

<div id="rooms_info">
    <table id="rooms_table">
        <tr>
            <th>Room Number</th>
            <th>Room Type</th>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td>
                <select class="room_type_select">
                    <option value="Please Choose">Please Choose</option>
                </select>
            </td>
        </tr>
    </table>

    <button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>

そして私のJQueryは;

<script>
    var userscounter=2
    var rmtypescounter=1
    var roomscounter=2

    function users(ID){
        document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
        userscounter++;
    };

    function rmtypes(ID){
        document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
        rmtypescounter++;
    }

    function rooms(ID){
        document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
        roomscounter++;
    };


    function edit_rooms_select(){   
        var roomtypelist = $('.room_type_select');
        roomtypelist.empty()
        $('#room_types_table tr td input').each(function(){
            var text = $(this).val();
            roomtypelist.append('<option value='+text+'>'+text+'</option>');
        });
    }
</script>

重複を削除していたJqueryを削除しました.必要な方法で確実に機能していなかったためです...

私はこれについて完全に間違った方法で行っている可能性があることを認識しており、td タグや入力などの使用が完全に間違っている場合は、フォーム全体を必要に応じて変更します。

4

1 に答える 1