0

次のスクリプトを作成しました。

http://jsfiddle.net/rgf8K/

仕組みとしては、誕生月と好きな色を選択すると、「有名人の名前」が表示されます。

現在、スクリプトの記述方法が間違っています...出力に、選択したオプション値のオプション ラベルが表示されないためです。その人が月に 1 月を選択し、色に緑を選択した場合、出力で次のように表示されます。あなたの有名人の名前はリンダ グリーンです。

代わりに、選択したラベル オプションのラベルを表示するにはどうすればよいですか? 本当にありがとう！！

HTML

<form>
    <select id="month">
        <option value="">- birth month -</option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
    </select>  
    <label class="January" for="January">Linda</label>
    <label class="February" for="February">Chris</label>
    <label class="March" for="March">James</label>


    <select id="color">
        <option value="">- favorite color -</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
    </select>  
    <label class="Green" for="Green">Roberts</label>
    <label class="Blue" for="Blue">Blue</label>
    <label class="Red" for="Red">Unger</label>
</form>

    <p id="output"></p>

jQuery

$("#month, #color").change(function () {
    var month = $("#month").val();
    var color = $("#color").val();
    var content = '';
    if (month && color) {
        content = 'Your celebrity name is ' + month + ' name ' + color + ' name';
    }
    $("#output").text(content).fadeIn();
});
4

2 に答える 2

0

オプションの値属性を変更できます。

<select id="month">
        <option value="">- birth month -</option>
        <option value="Linda">January</option>
        <option value="Chris">February</option>
        <option value="James">March</option>
    </select>

色についても同様です。

<select id="color">
        <option value="">- favorite color -</option>
        <option value="Roberts">Green</option>
        <option value="Blue">Blue</option>
        <option value="Unger">Red</option>
    </select>

次に、ラベルを削除すると、期待どおりに機能するはずです。

于 2013-04-03T01:34:03.040 に答える