複数のselectのうちどれか１つは必須項目にしたい

Question

下記コード、div.classlistの中に複数のセレクトメニュー３つとテキストボックスがあります。
この中で、３つのセレクトメニューのうち、未選択または複数選択している場合は入力エラーのアラートを出すようにしたいと考えています。要は、３つのうちどれか１つだけは必須にしたいです。
テキストボックスはすでに必須項目としています。
Javascript（またはjQuery）にてそのコードを実現するにはどのようにすればよいかご教授いただけないでしょうか。
よろしくお願いいたします。

<div class="classlist">
  <ul class="clearfix">
    <li>セレクトメニュー１:</li>
    <li>
      <select id="productoptions_1" name="productoptions[1]" style="">
        <option label="選択" value="1" selected="selected">選択</option>
        <option label="○" value="2">○</option>
        <option label="▲" value="3">▲</option>
        <option label="□" value="4">□</option>
      </select>
    </li>
  </ul>
  <ul class="clearfix">
    <li>セレクトメニュー２:</li>
    <li>
      <select id="productoptions_2" name="productoptions[2]" style="">
        <option label="選択" value="11" selected="selected">選択</option>
        <option label="○○" value="12">○○</option>
        <option label="▲▲" value="13">▲▲</option>
        <option label="□□" value="14">□□</option>
      </select>
    </li>
  </ul>
  <ul class="clearfix">
    <li>セレクトメニュー３:</li>
    <li>
      <select id="productoptions_3" name="productoptions[3]" style="">
        <option label="選択" value="21" selected="selected">選択</option>
        <option label="○○○" value="22">○○○</option>
        <option label="▲▲▲" value="23">▲▲▲</option>
        <option label="□□□" value="24">□□□</option>
      </select>
    </li>
  </ul>
  <ul class="clearfix">
    <li>テキスト入力１:</li>
    <li>
      <input id="productoptions_4" class="box300" name="productoptions[4]" value="" style="" type="text">
    </li>
  </ul>
  <ul class="clearfix">
    <li>テキスト入力２:</li>
    <li>
      <input id="productoptions_5" class="box300" name="productoptions[5]" value="" style="" type="text">
    </li>
  </ul>
</div>

Answer 1

jQueryを使った場合、
例えば ID="productoptions_1"のセレクトメニューの選択状態を取得するのであれば、
$('#productoptions_1').val();
で、選択されたoptionのvalue値が取得できます。
また、
$('#productoptions_1 option:selected').text();
で、選択されたoptionのテキスト(labelの値)が取得できます。

それぞれのセレクトメニューで取得したvalue値が「選択」と同じものをカウントする、またはテキストが「選択」である個数をカウントすれば判定できると思います。

選択されているテキストで判定するのであれば、こんな感じでしょうか。

var ar = [];
ar.push($('#productoptions_1 option:selected').text());
ar.push($('#productoptions_2 option:selected').text());
ar.push($('#productoptions_3 option:selected').text());
var cnt = 0;
for(var i = 0; i < ar.length; i++) {
  if (ar[i] == "選択") {
     cnt++;
  }
}
if (cnt != 1) {
  alert("選択できるのは１個だけ");
}

Comments

[web]

返信が遅くなり申し訳ありません。
教えて頂いた記述に
$('.btn').click(function(e) {
を追加することで、ボタンをクリックした際にアラートを出すことに成功しました！
さらに画面遷移しないようにしたいので、また別で質問させて頂きます。
ありがとうございました。

Answer 2

foreach等どうでしょう

   var a=0;
   $("select").each(function(){
   	a+=$("option:selected",this).index();
   });
   if(a==1){
   	//何かの処理;
    return false;
   }else{
    alert("どれか一つ選択してください");
   }

Comments

[web]

返信が遅くなりすみません。
ご回答いただきありがとうございました。

Answer 3

このフォームのサブミット時に
document.getElementById("productoptions_1") > 0
のようなチェックを各select文に関して行い、それらが1未満ならアラートを出してサブミットしないようにするイベントドリブンのjavascriptを用意しておくような流れになるかと思われます。

Comments

[web]

返信が遅くなりすみません。
ご回答いただきありがとうございました。

Answer 4

requiredをタグの最後につければよいのではないでしょうか？

<select id="productoptions_1" name="productoptions[1]" style="" required>

Comments

[s.t.]

javascriptでしたね。
であれば、DOMでselectが何を選択しているかをjavascript側で取得してやれば問題ないと思われます。

[web]

s.t.様、回答ありがとうございます。
すみません、説明不足だったのですが、このHTMLが動的に出力されているものでして、
わたしの方でHTMLタグ自体を触ることが出来ない状況です。。