Question

我在这里有两个关于vanilla JavaScript的问题。 我不能使用jQuery。

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);
    }
}

在我的HTML中，我将其作为：

<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。

我该如何解决这个问题？

Answer 1

第一个答案：这是一个变量引用问题。您必须制作两个不同的oEle元素或使用oEle.cloneNode();之类的

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

第二个答案：你只选择第一个复选框元素，你必须循环它们：

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");
}

Answer 2

对于第一个问题，在将option元素追加到第一个下拉列表后，您可以创建option元素的克隆并附加到第二个下拉列表。如果您没有克隆，则选项元素将始终附加到第二个下拉列表，并将第一个下拉列表留空。

＆＃13;

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);
    }
}

＆＃13;

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>

＆＃13;

多个下拉菜单和单选按钮

2 个答案: