3

フォームを送信するときに、オプションボックスの値とキーの両方を送信したい。これはかなり単純なはずだと思いますが、どうすればよいかわかりません。以下は、私が参照しているものを示すための私のフォームからの抜粋です。

<form name='form' onSubmit="return checkForm();" action="../servlet/AccountRequest">

<select name="type1">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<br/><input type="button" id="Submit" onclick="checkForm(this.form)" value="Request" />
<input type="reset" value="Cancel"/>
</form>

通常のシナリオでは、ドロップダウンボックスで[オプションA]を選択した場合、値または「1」を送信します。ただし、実際には、選択範囲の値ANDキー（この場合は「1」と「オプションA」の両方）を送信したいと思います。

私の場合、フォーム入力を検証するcheckForm（）JavaScript関数（名、姓、電子メールアドレス、パスワードなどの他のフィールドがあります）を呼び出し、Javaクラス（AccountRequest）にパラメーターを転送します。「リクエスト」ボタンがクリックされたときにキーを変数として保存する方法があると確信していますが、方法がわかりません。

どんな助けでも大歓迎です！

4

6 に答える 6

5

データの JSON 表現で遊ぶことができます。

<select name="type1">
 <option value="{'1':'Option A'}">Option A</option>
 <option value="{'2':'Option B'}">Option B</option>
</select>
于 2012-08-15T20:10:48.977 に答える
4

期待していたアプローチではないかもしれませんが、キーと値のペアを値として送信し、サーバー側で受信したときに解析することができます。

<select name="type1">
   <option value="1,Option A">Option A</option>
   <option value="2,Option B">Option B</option>
</select>
于 2012-08-15T20:04:22.067 に答える
3

HTML では、これは不可能です。select要素によって提供されるデータは、存在する場合は selected の属性として定義されます(存在しない場合は、選択された要素のコンテンツ)。valueoptionoption

JavaScript では、コンテンツ (説明の「キー」) をどのように渡すかを決めれば、非常に簡単です。value最も単純な方法として、文字列間に区切りを付けて、コンテンツを属性に追加できます。次に、そのサーバー側を解析する必要がありますが、それも簡単です。

ただし、optionコンテンツがユーザー インターフェイスに表示され、ユーザーが理解できる文字列であり、value属性が機械可読で簡単に処理できるデータであるというのは、まさに要素の概念の一部です。良い設計では、それらは結合されずに別々に保持されます。valueサーバーは属性からのデータのみを必要とします。それ以外の場合は、修正する必要がある設計上の欠陥があります。

于 2012-08-15T20:07:58.870 に答える
3

このコードを追加して、関数で選択した<option>タグのテキストを取得できます。checkform

var select = document.getElementsByName("type1")[0]; // get select element - simpler if it has an ID because you can use the getElementById method
var options = select.getElementsByTagName("option"); // get all option tags within the select

for (i = 0; i < options.length; i++) { // iterate through all option tags
    if (options[i].value == select.value){ // if this option is selected
        var key = options[i].innerHTML; // store key of selected option here
    }
}

選択されているキーを表示する DEMO

于 2012-08-15T20:33:30.847 に答える
2

複合値を使用して、サーバー上で解析します。

<option value="1_A">Option A</option>
于 2012-08-15T20:04:16.020 に答える