2009-07-20 15 views
0

私はn選択ボックス内の選択肢の数です。ユーザーが選択ボックスで1つ以上の選択肢を選択してフォームを送信した後、ユーザーが4つ以上の選択肢を選択していないことを確認する必要があります。JavaScriptを使用して複数選択リストで選択された選択肢の数を制限する方法を教えてください。

私は次のことを試してみました:

function howMany() { 
    var selObj = document.getElementsByName('xid[]'); 

    var totalChecked = 0; 

    for (i = 0; i < selObj.options.length; i++) { 
     if (selObj.options[i].selected) { 
      totalChecked++; 
     } 
    } 
    if (totalChecked > 4) { 
     alert("You can't check more than 4 options"); 
     return false; 
    } 
    return true; 
} 
+5

複数の選択肢は、多くのユーザーにとって難しい非常に厄介なUIです。代わりにチェックボックスグループに変更することをお勧めします。 – Quentin

答えて

-1

場合は、単純なjavascript ..ここで行く。

<pre> 
<html> 
    <script> 
     function howMany() { 
       var selObj = document.getElementById('paramid[]'); 
       var totalChecked = 0; 
       for (i = 0; i < selObj.options.length; i++) { 
        if (selObj.options[i].selected) { 
         totalChecked++; 
        } 
       } 
       alert(totalChecked); 
       if (totalChecked > 4) { 
        alert("You can't check more than 4 options"); 
        return false; 
       } 
       return true; 
     } 
     function testSubmit() { 
      return howMany(); 
     } 
    </script> 
    <body> 
     <form action="http://google.com"> 
      <select name="paramid[]" id="paramid[]" multiple> 
       <option>TEST1</option 
       <option>TEST2</option 
       <option>TEST3</option 
       <option>TEST4</option 
       <option>TEST5</option 
       <option>TEST6</option 
       <option>TEST7</option 
      </select> 
      <input type="submit" onclick="return testSubmit()" name="s" value=" How Many " id="s"/> 
     </form> 
    </body> 
</html> 
</pre> 
+0

あなたの書式は壊れているので、HTMLを修正する必要があると言わざるを得ないでしょう(HTMLを修正して無効にする必要がないように修正する必要があります。 HTMLで)。 – Quentin

2

手掛かりが呼び出す最初のDOMオブジェクトの名前である:取得要素 BYNAME

これはそれですべての要素のノードリストを返します。名。最初のものをリストから切り離したいとします。

 var selObj = document.getElementsByName('paramid[]')[0]; 

いっそ、むしろ、文書全体を検索するよりも:

 var selObj = myForm.elements['paramid[]'] 

&hellip;ここでmyFormはフォームへの参照です(これはサブミットイベントハンドラとしてこの関数を使用した場合はthisから得ることができます)。

関連する問題