-3

当我单击“非技术”单选按钮时，我想将选择框的选项更新为“英语”、“历史”、“数学”。单选按钮和选择框都在表单内。这是我在下面给出的 HTML 代码。

我需要一个 JavaScript 验证：

<tr>
    <td>Category:</td>
    <td>
        <input type="radio" name="category" value="1" checked="yes" />Technical
        <input type="radio" name="category" value="2" />Non-technical</td>
</tr>
<tr>
    <td>Branch</td>
    <td>
        <select id="techy">
            <option>Hardware</option>
            <option>Networking</option>
            <option>Linux</option>
    </td>
</tr>
4

2 回答 2

1

You can have both of the select lists in your markup and only show the relevant one depending on the radio button that is chosen. That's better than manipulating the contents of the <select>.

jsFiddle

HTML

<table>
    <tr>
        <td>Category:</td>
        <td>
            <input id="radio-techy" type="radio" name="category" value="1" checked="yes" />Technical
            <input id="radio-non-techy" type="radio" name="category" value="2" />Non-technical
        </td>
    </tr>
    <tr>
        <td>Branch</td>
        <td>
            <div id="select-div" class="tech">
                <select id="techy">
                    <option>Hardware</option>
                    <option>Networking</option>
                    <option>Linux</option>
                </select>
                <select id="non-techy">
                    <option>English</option>
                    <option>History</option>
                    <option>Maths</option>
                </select>
            </div>
        </td>
    </tr>
</table>

CSS

#select-div select {
    display:none;
}

#select-div.tech #techy {
    display:block;
}

#select-div.non-tech #non-techy {
    display:block;
}

JS

var techButton = document.getElementById('radio-techy');
var nonTechButton = document.getElementById('radio-non-techy');

techButton.onclick = function () {
    document.getElementById('select-div').className = 'tech';
}
nonTechButton.onclick = function () {
    document.getElementById('select-div').className = 'non-tech';
}
于 2013-03-23T17:52:44.413 回答
0

我在想你可以尝试这样的事情：

HTML

<table>
    <tr>
        <td>Category:</td>
        <td>
            <input type="radio" id="radioTech" name="category" value="1" checked="yes" />Technical
            <input type="radio" id="radioNonTech" name="category" value="2" />Non-technical</td>
    </tr>
    <tr>
        <td>Branch</td>
        <td>
            <select id="options"></select>
        </td>
    </tr>
</table>

在脚本标签或 file.js 中

// This is a literal object (JSON), if you want to add more items you just have to add them here.
options = {
    'technical': [
        'Hardware',
        'Networking',
        'Linux'
     ],
    'ntechnical': [
        'English',
        'History',
        'Maths'
     ]
};

var renderItems = function( arrItems, selectElement ){

  selectElement.innerHTML = '';

    for( var i = 0, l = arrItems.length; i < l; i++ )
    {
        var item = document.createElement( 'option' );
            item.innerHTML = arrItems[i];
        selectElement.appendChild( item );
    }

};

window.onload = function() {

    var radioTechnical = document.getElementById( 'radioTech' );
    var radioNonTechnical = document.getElementById( 'radioNonTech' );
    var selectElement = document.getElementById( 'options' );

    radioTechnical.onclick = function(){ renderItems( options.technical, selectElement ) };
    radioNonTechnical.onclick = function(){ renderItems( options.ntechnical, selectElement ) };

    radioTechnical.click();

};

在此示例中，您将动态添加项目，如果需要，它使您可以从外部资源获取数据并将其添加到 JSON 对象，之后完成其余工作以及数组中的项目显示=D

于 2013-03-23T19:12:08.860 回答