2

以下のように複数選択しています。

ここに画像の説明を入力

以下のようにオプションを選択できます。3 つのスポーツが選択されたとします。

ここに画像の説明を入力

上記のように項目が選択されたら、フォーム送信は成功です。

残念ながら、フォームが送信されたときに以下のようにスポーツが選択されていない場合、投稿は空です。

ここに画像の説明を入力

セレクトボックス

<select style="width: 100px; height: 80px;" class="input" id="selected_sport_list" name="selected_sport_list[]" multiple="">
<option value="2">sport 2</option>
<option value="3">sport 3</option>
<option value="5">sport test x</option></select>

フォームが送信されたときに特定のアイテムが選択されていることを確認するにはどうすればよいですか? これを修正するためにjqueryを使用することは可能ですか? またはどのように？

ありがとう

4

3 に答える 3

5

ここでの問題は、ユーザーが最初に「チェック」しない限り、ブラウザが各選択ボックスから値を送信しないことです。これは標準的な動作であり、JavaScript を使用して問題に対処する必要があります。

必要なことは、フォームが送信されるときに、HTTP 要求に各選択ボックス内に存在する値が含まれていることを確認することです。これは、次の 2 つの方法で行うことができます。

  1. 送信されたデータの一部を手動で構築し、それをサーバーに転送します。たとえば、クエリ文字列の一部として含めるか、入力されたデータ オブジェクトを jQuery AJAX メソッドに渡すか、または
  2. 非表示の入力要素を選択ボックスの状態に合わせてフォームに動的に追加/削除し、フォームが送信されたときにこれらの入力要素に必要な情報が含まれるようにします (この場合、ユーザーがいくつかのオプションを選択する場合をカバーするように注意する必要があります)。あまりにも; 二重エントリは必要ありません!)

最初のオプションでは、フォームの送信をインターセプトし、JavaScript を介して独自に変更したリクエストを送信します。

2 番目のオプションには、フォームへの要素の追加と削除が含まれ、熱心に (選択ボックス間の要素の転送を傍受し、非表示の要素を使用して状態を即座にミラーリングする) または遅延して (フォームの送信を傍受し、非表示の要素を飛ぶ）。

この時点では、すべての情報が手元にあるわけではないため、上記から 1 つのアプローチを選択して、作成した関連コードの一部を提供してください。

于 2012-10-30T10:53:00.217 に答える
1

HTML

<form onsubmit="return testSelects();"></form>

JS

function testSelects() {
    if ( $('select').children(":selected").length == 0) {
       alert("Please select options before submiting the form!");
       return false;
    }

    return true;
}
于 2012-10-30T10:52:14.890 に答える
1

はい、できます:

jQuery("#form").submit(function(){
 if(jQuery("select.input:selected").length == jQuery("select.input").length){
  // your actions if true
 } else {
  // your actions if false
 }
});

幸運を

于 2012-10-30T10:59:18.983 に答える