多个下拉菜单和单选按钮 [英] multiple dropdowns and radio buttons
本文介绍了多个下拉菜单和单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1。创建多个下拉菜单。
我有这个JavaScript函数：
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）;
$ b $ p
$ b 在我的HTML中， >
< body onload =loadTheDropdowns（）>
您在该公司工作多少年
< select name =Inputid =compTenure>
< / select>
< br />
您在当前位置工作多少年
< / select>
< / body>
当我运行这个时，没有加载下拉菜单。
如何加载下拉列表？
2 。验证单选按钮。
我在HTML中有这样的代码：
<表>
< tr>
< td>我对我当前的位置*< / td>
< td><输入名称=cprb1type =radiovalue =V1/>< / td>
< td><输入名称=cprb1type =radiovalue =V2/>< / td>
< td><输入名称=cprb1type =radiovalue =V3/>< / td>
< td><输入名称=cprb1type =radiovalue =V4/>< / td>
< td><输入名称=cprb1type =radiovalue =V5/>< / td>
< / tr>
< tr>
< td>我的技术足以履行我的责任*< / td>
< td><输入名称=cprb2type =radiovalue =V1/>< / td>
< td><输入名称=cprb2type =radiovalue =V2/>< / td>
< td><输入名称=cprb2type =radiovalue =V3/>< / td>
< td><输入名称=cprb2type =radiovalue =V4/>< / td>
< td><输入名称=cprb2type =radiovalue =V5/>< / td>
< / tr>
< tr>
< td>我有足够的时间来完成我所有的责任*< / td>
< td><输入名称=cprb3type =radiovalue =V1/>< / td>
< td><输入名称=cprb3type =radiovalue =V2/>< / td>
< td><输入名称=cprb3type =radiovalue =V3/>< / td>
< td><输入名称=cprb3type =radiovalue =V4/>< / td>
< td><输入名称=cprb3type =radiovalue =V5/>< / td>
< / tr>
< tr>
< td>我需要设定适当的小时数*< / td>
< td><输入名称=cprb4type =radiovalue =V1/>< / td>
< td><输入名称=cprb4type =radiovalue =V2/>< / td>
< td><输入名称=cprb4type =radiovalue =V3/>< / td>
< td><输入名称=cprb4type =radiovalue =V4/>< / td>
< td><输入名称=cprb4type =radiovalue =V5/>< / td>
< / tr>
< tr>
< td>我找到我目前的位置安全*< / td>
< td><输入名称=cprb5type =radiovalue =V1/>< / td>
< td><输入名称=cprb5type =radiovalue =V2/>< / td>
< td><输入名称=cprb5type =radiovalue =V3/>< / td>
< td><输入名称=cprb5type =radiovalue =V4/>< / td>
< td><输入名称=cprb5type =radiovalue =V5/>< / td>
< / tr>
< tr>
< td>我认为我的工作足够应付*< / td>
< td><输入名称=cprb6type =radiovalue =V1/>< / td>
< td><输入名称=cprb6type =radiovalue =V2/>< / td>
< td><输入名称=cprb6type =radiovalue =V3/>< / td>
< td><输入名称=cprb6type =radiovalue =V4/>< / td>
< td><输入名称=cprb6type =radiovalue =V5/>< / td>
< / tr>
< / table>
< input type =submitvalue =Submitonclick =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 ）;
$ b $ p
$ b 问题在于它只检查第一个单选按钮被选中。如果我删除了 [0] ，即使我正在选择单选按钮，它也会提示 RB不检查 。
我该如何解决这个问题？ 首先回答：这是一个可变参考问题。您必须制作两个不同的 oEle 元素或使用 oEle.cloneNode（）; 像
document.getElementById（'posTenure'）。appendChild（oEle.cloneNode（true））;
第二个答案：您只需要第一个复选框元素，您必须循环它们：
函数检查（名称）{
var cprb = document.getElementsByName（name）;
for（var i = 0; i< cprb.length; i ++）{
if（cprb [i] .checked）
return true;
$ b函数validate（）{
if（！check（'cprb1'）&&！check（'cprb2'）&&！check （'cprb4'）&&！check（'cprb5'）&&！check（'cprb6'））
alert（RB not check） ;
}
I have 2 questions here for vanilla JavaScript. I cannot use jQuery.
1. Create multiple dropdowns.
I have this JavaScript function:
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);
}
}
In my HTML I have it as:
<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>
When I run this, none of the dropdowns are loaded.
How can I load the dropdown?
2. Validating radio buttons.
I have this code in my 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()">
I'm using this function to 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");
}
}
The issue is that it is only checking if the first radio button is checked. If I remove that [0], it is alerting RB not check, even though I'm selecting the radio buttons.
How can I fix this?
解决方案 First answer : it's a variable reference problem. You have to make two different oEle element or using oEle.cloneNode(); like
document.getElementById('posTenure').appendChild(oEle.cloneNode(true));
Second answer : you take only the first checkbox element, you have to loop them like :
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");
}
这篇关于多个下拉菜单和单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
