2017-09-18 10 views
1

私はバニラのJavaScriptのためにここに2つの質問を持っています。 jQueryは使用できません。複数のドロップダウンやラジオボタン

1.複数のドロップダウンを作成します。

私はこのJavaScript関数があります。私のようにそれを持って私のHTMLで

function loadTheDropdowns() { 
    var oTxt; 
    for (var i = 0; i < 11; ++i) { 
     var oEle = document.createElement('option'); 
     if (i == 0) { 
      oTxt = document.createTextNode("select your tenure"); 
      oEle.setAttribute('disabled', 'disabled'); 
      oEle.setAttribute('selected', 'selected'); 
      oEle.appendChild(oTxt); 
     } else { 
      oTxt = document.createTextNode(i); 
      oEle.appendChild(oTxt); 
     } 
     document.getElementById('compTenure').appendChild(oEle); 
     document.getElementById('posTenure').appendChild(oEle); 
    } 
} 

を:

<body onload="loadTheDropdowns()"> 
    How many years you worked on this company 
    <select name="Input" id="compTenure"> 
    </select> 
    <br /> 
    How many years you worked on your current position 
    <select name="Input" id="posTenure"> 
    </select> 
</body> 

私はこれを実行すると、ドロップダウンのどれがロードされていません。

どのようにドロップダウンを読み込むことができますか?ラジオボタンの検証


2。

私はHTMLでこのコードを持っている:

<table> 
    <tr> 
     <td>I was trained adequetly for my current position *</td> 
     <td><input name="cprb1" type="radio" value="V1" /></td> 
     <td><input name="cprb1" type="radio" value="V2" /></td> 
     <td><input name="cprb1" type="radio" value="V3" /></td> 
     <td><input name="cprb1" type="radio" value="V4" /></td> 
     <td><input name="cprb1" type="radio" value="V5" /></td> 
    </tr> 
    <tr> 
     <td>I am skillfull enough to fulfill my responsibility *</td> 
     <td><input name="cprb2" type="radio" value="V1" /></td> 
     <td><input name="cprb2" type="radio" value="V2" /></td> 
     <td><input name="cprb2" type="radio" value="V3" /></td> 
     <td><input name="cprb2" type="radio" value="V4" /></td> 
     <td><input name="cprb2" type="radio" value="V5" /></td> 
    </tr> 
    <tr> 
     <td>I have enough time to fulfill all my responsibility *</td> 
     <td><input name="cprb3" type="radio" value="V1" /></td> 
     <td><input name="cprb3" type="radio" value="V2" /></td> 
     <td><input name="cprb3" type="radio" value="V3" /></td> 
     <td><input name="cprb3" type="radio" value="V4" /></td> 
     <td><input name="cprb3" type="radio" value="V5" /></td> 
    </tr> 
    <tr> 
     <td>I have required to work a proper number of hours *</td> 
     <td><input name="cprb4" type="radio" value="V1" /></td> 
     <td><input name="cprb4" type="radio" value="V2" /></td> 
     <td><input name="cprb4" type="radio" value="V3" /></td> 
     <td><input name="cprb4" type="radio" value="V4" /></td> 
     <td><input name="cprb4" type="radio" value="V5" /></td> 
    </tr> 
    <tr> 
     <td>I find my current position secure *</td> 
     <td><input name="cprb5" type="radio" value="V1" /></td> 
     <td><input name="cprb5" type="radio" value="V2" /></td> 
     <td><input name="cprb5" type="radio" value="V3" /></td> 
     <td><input name="cprb5" type="radio" value="V4" /></td> 
     <td><input name="cprb5" type="radio" value="V5" /></td> 
    </tr> 
    <tr> 
     <td>I think my work is appritiate enough *</td> 
     <td><input name="cprb6" type="radio" value="V1" /></td> 
     <td><input name="cprb6" type="radio" value="V2" /></td> 
     <td><input name="cprb6" type="radio" value="V3" /></td> 
     <td><input name="cprb6" type="radio" value="V4" /></td> 
     <td><input name="cprb6" type="radio" value="V5" /></td> 
    </tr> 
</table> 
<input type="submit" value="Submit" onclick="validate()"> 

私が検証するために、この機能を使用しています。

function validate() { 
    if (!document.getElementsByName('cprb1')[0].checked || 
     !document.getElementsByName('cprb2')[0].checked || 
     !document.getElementsByName('cprb3')[0].checked || 
     !document.getElementsByName('cprb4')[0].checked || 
     !document.getElementsByName('cprb5')[0].checked || 
     !document.getElementsByName('cprb6')[0].checked) { 
      alert("RB not check"); 
     } 
    } 

問題は、最初のラジオボタンがオンになっているかどうかを確認することだけです。 [0]を削除した場合は、ラジオボタンを選択していても、RB not checkに警告しています。

私はこの問題を解決するにはどうすればよいですか?

+0

ポスト作業スニペット –

+0

が私の悪いを@ShadowFiend、申し訳ありませんが、私は、私のコードにタイプミスをこれをした、私の質問を更新し、質問に追加逃しました – user3872094

答えて

2

最初の答え:それは変数の参照の問題です。次の2つの異なるoEle要素を作るために持っているか、oEle.cloneNode();

document.getElementById('posTenure').appendChild(oEle.cloneNode(true)); 

状の第2の答えを使用して:あなたの後に、最初の質問については

function check(name) { 
    var cprb = document.getElementsByName(name); 
    for(var i = 0; i<cprb.length;i++){ 
     if(cprb[i].checked) 
      return true; 
    } 
} 
function validate() { 
    if(!check('cprb1') && !check('cprb2') && !check('cprb3') && !check('cprb4') && !check('cprb5') && !check('cprb6')) 
     alert("RB not check"); 
} 
2

:あなたはあなたのようなループそれらをしなければならない、唯一の最初のチェックボックス要素を取ります最初のドロップダウンにoption要素を追加すると、オプション要素のクローンを作成し、2番目のドロップダウンに追加することができます。クローンを作成しない場合、option要素は常に2番目のドロップダウンに追加され、最初のドロップダウンは空のままになります。

window.onload = function() { loadTheDropdowns(); } 
 
function loadTheDropdowns() { 
 
    var oTxt; 
 
    for (var i = 0; i < 11; ++i) { 
 
     var oEle = document.createElement('option'); 
 
     if (i == 0) { 
 
      oTxt = document.createTextNode("select your tenure"); 
 
      oEle.setAttribute('disabled', 'disabled'); 
 
      oEle.setAttribute('selected', 'selected'); 
 
      oEle.appendChild(oTxt); 
 
     } else { 
 
      oTxt = document.createTextNode(i); 
 
      oEle.appendChild(oTxt); 
 
     } 
 

 
     document.getElementById('compTenure').appendChild(oEle); 
 
     var oPos = oEle.cloneNode(true); 
 
     document.getElementById('posTenure').appendChild(oPos); 
 
    } 
 
}
How many years you worked on this company 
 
<select name="Input" id="compTenure"></select> 
 
<br/> 
 
<br /> How many years you worked on your current position 
 
<select name="Input" id="posTenure"></select>

関連する問題