-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

マークアップに両方の選択リストを含めることができ、選択したラジオボタンに応じて関連するリストのみを表示できます。これは、の内容を操作するよりも優れてい<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>

script タグまたは 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 に答える