0

テキストボックスと 2 つの選択リストの 3 つの HTML フィールドがあります。私がやろうとしているのは、ユーザーがテキスト フィールドに何かを入力し、他の 2 つのリストからオプションを選択してから、[追加] ボタンをクリックして、選択した合計を別のリストに追加することです。この最終的なリストは、CGI スクリプトによって送信および受信されるものです。

たとえば、ユーザーが「Toyota」と入力し、1 つのリストから Sedan を選択し、2 番目のリストから 2004 を選択して、[追加] をクリックします。次に、「Toyota Sedan 2004」が空のリストに追加されます。ユーザーは、複数の選択肢をリストに追加したり、リストから削除したりできます。このリストは、フォームが送信されたときに送信されるリストです。これを Javascript のみで行うのが望ましいので、JQuery は使用しません。誰かが私を正しい方向に向けることができますか?

4

2 に答える 2

1

必要なのは、「追加」ボタンをクリックすると、取得する単純な JavaScript 関数が呼び出されることです: テキスト、選択 1 & 選択 2 => これらの情報を使用して新しいオプションを作成し、結果リストに追加します。

主な JavaScript 関数:

- document.getElementById
- document.createElement
- appendChild

HTML では、フォーム/送信ボタンは結果リストの周りにのみ配置する必要があります。

例 ( jsfiddle リンク):

<html>
    <head>
        <script>
            function add() {
                var txt = document.getElementById("txt").value;
                var sel1 = document.getElementById("sel1").value;
                var sel2 = document.getElementById("sel2").value;
                var result = txt + " " + sel1 + " " + sel2;

                var resultOption = document.createElement("option");
                resultOption.value = result;
                resultOption.text = result;
                document.getElementById("selResult").appendChild(resultOption);
            }
        </script>
    </head>
    <body>
        <input id="txt" type="text" />
        <select id="sel1">
            <option value="value11">value11</option>
            <option value="value12">value12</option>
            <option value="value13">value13</option>
        </select>
        <select id="sel2">
            <option value="value21">value21</option>
            <option value="value22">value22</option>
            <option value="value23">value23</option>
        </select>
        <input type="button" value="add" onClick="javascript:add()"/>
        <br/>
        result:
        <form action ="." method="post">
            <select id="selResult"></select>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>
于 2012-10-13T07:45:02.370 に答える
0

この jquery プラグインを使用する必要があります。

  1. Jquery フォーム
  2. Jquery 自動タブ
  3. Jquery UI

そして、あなたに役立ついくつかのjquery関数：

  1. . ajax()
  2. プリペンド()
  3. 。の上（）
于 2012-10-13T07:24:30.840 に答える