2

ユーザーが選択した内容に応じて、フォームの対応する部分を「表示」する関数を作成する必要があります。たとえば、「ピザ」が選択されている場合、ピザの種類に関する質問を含む div #section2 が表示されます。

これはhtmlコードの一部です

<form id="survey" action="#" method="post">

<div id="section1">
    <label for="food">What is your favourite type of food?</label>
    <select id="food" onchange="selection()">
        <option value="pizza">Pizza</option>
        <option value="mex">Mexican</option>
        <option value="thai">Thai</option>
    </select>
</div>
<div id="section2">
    What is your favourite type of pizza?<br>
    <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
    <label for="supreme">Supreme</label><input type="radio" id="supreme">
    <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>

オプションのピザをクリックしたときにセクション 2 が表示されるようにするには、どのように JavaScript 関数を作成すればよいでしょうか? 私は完全なJavaScript初心者なので、どんな助けでも素晴らしいでしょう。

4

2 に答える 2

3

デモ: http://jsfiddle.net/iambriansreed/rQr6v/

JavaScript:

var sections = {
    'pizza': 'section2',
    'mex': 'section3',
    'thai': 'section4'   
};

var selection = function(select) {

    for(i in sections)
        document.getElementById(sections[i]).style.display = "none";    

    document.getElementById(sections[select.value]).style.display = "block";

}

デモをチェックアウトします。section3およびsection4div を実際のコンテンツに置き換えます。

于 2012-05-13T13:43:17.447 に答える
2

そのための解決策はたくさんあります。最も簡単なオプションの 1 つは、マークアップを少し変更してdivID を使用することです。

HTML:

<div id="section1">
    <label for="food">What is your favourite type of food?</label>
    <select id="food" onchange="selection(this)">
        <option value="pizza">Pizza</option>
        <option value="mex">Mexican</option>
        <option value="thai">Thai</option>
    </select>
</div>
<div id="section_pizza" style="display: none;">
    What is your favourite type of pizza?<br>
    <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
    <label for="supreme">Supreme</label><input type="radio" id="supreme">
    <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>

JavaScript:

function selection(select) {
    document.getElementById("section_" + select.value).style.display = "block";
}

ただし、JQuery ライブラリを使用して、より高速で柔軟にすることができます。ブロックにアニメーションを簡単に追加したり、機能を追加したりできます。

HTML:

<div id="section1">
    <label for="food">What is your favourite type of food?</label>
    <select id="food">
        <option value="pizza">Pizza</option>
        <option value="mex">Mexican</option>
        <option value="thai">Thai</option>
    </select>
</div>
<div id="section2" data-type="pizza" style="display: none;">
    What is your favourite type of pizza?<br>
    <label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
    <label for="supreme">Supreme</label><input type="radio" id="supreme">
    <label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>

JavaScript:

$("#food").change(function() {
    $("[data-type]").hide();
    $("[data-type='" + this.value + "']").show(1000);
});
于 2012-05-13T13:15:29.367 に答える