Question

所以我这里有3个带选项的选择标签。我想做的是，例如，用户在第一个选择中选择“额外强度”选项，他们应该看到是/否提示。如果选择是，则所有其他选择应仅具有“额外强度”选项。如果未选择，则不执行任何操作。以下是我到目前为止的情况：

HTML

<select id="bundle-option-49">
    <option value="1">Choose a selection...</option>
    <optgroup label="Regular Flavor">
        <option value="6455">Regular Double Extra +$0.00</option>
        <option value="6456">Regular Extra Strength +$0.00</option>
        <option value="6457">Regular Full Strength +$0.00</option>
        <option value="6458">Regular Light Strength +$0.00</option>
        <option value="6459">Regular Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Menthol Flavor">
        <option value="6460">Menthol Double Extra +$0.00</option>
        <option value="6461">Menthol Extra Strength +$0.00</option>
        <option value="6462">Menthol Full Strength +$0.00</option>
        <option value="6463">Menthol Light Strength +$0.00</option>
        <option value="6464">Menthol Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Vanilla Flavor">
        <option value="6460">Vanilla Double Extra +$0.00</option>
        <option value="6461">Vanilla Extra Strength +$0.00</option>
        <option value="6462">Vanilla Full Strength +$0.00</option>
        <option value="6463">Vanilla Light Strength +$0.00</option>
        <option value="6464">Vanilla Nicotine Free +$0.00</option>
    </optgroup>
</select>
<div id="panel">
    <p>Would you like to set this strength for all selection?</p>
    <form action="">
        <input type=radio name="r" id=1>Yes
        <input type=radio name="r" id=0>No</form>
</div>
<select id="bundle-option-50">
    <option value="">Choose a selection...</option>
    <optgroup label="Regular Flavor">
        <option value="6520">Regular Double Extra +$0.00</option>
        <option value="6521">Regular Extra Strength +$0.00</option>
        <option value="6522">Regular Full Strength +$0.00</option>
        <option value="6523">Regular Light Strength +$0.00</option>
        <option value="6524">Regular Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Menthol Flavor">
        <option value="6525">Menthol Double Extra +$0.00</option>
        <option value="6526">Menthol Extra Strength +$0.00</option>
        <option value="6527">Menthol Full Strength +$0.00</option>
        <option value="6528">Menthol Light Strength +$0.00</option>
        <option value="6529">Menthol Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Vanilla Flavor">
        <option value="6460">Vanilla Double Extra +$0.00</option>
        <option value="6461">Vanilla Extra Strength +$0.00</option>
        <option value="6462">Vanilla Full Strength +$0.00</option>
        <option value="6463">Vanilla Light Strength +$0.00</option>
        <option value="6464">Vanilla Nicotine Free +$0.00</option>
    </optgroup>
</select>
<select id="bundle-option-51">
    <option value="">Choose a selection...</option>
    <optgroup label="Regular Flavor">
        <option value="6520">Regular Double Extra +$0.00</option>
        <option value="6521">Regular Extra Strength +$0.00</option>
        <option value="6522">Regular Full Strength +$0.00</option>
        <option value="6523">Regular Light Strength +$0.00</option>
        <option value="6524">Regular Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Menthol Flavor">
        <option value="6525">Menthol Double Extra +$0.00</option>
        <option value="6526">Menthol Extra Strength +$0.00</option>
        <option value="6527">Menthol Full Strength +$0.00</option>
        <option value="6528">Menthol Light Strength +$0.00</option>
        <option value="6529">Menthol Nicotine Free +$0.00</option>
    </optgroup>
    <optgroup label="Vanilla Flavor">
        <option value="6460">Vanilla Double Extra +$0.00</option>
        <option value="6461">Vanilla Extra Strength +$0.00</option>
        <option value="6462">Vanilla Full Strength +$0.00</option>
        <option value="6463">Vanilla Light Strength +$0.00</option>
        <option value="6464">Vanilla Nicotine Free +$0.00</option>
    </optgroup>
</select>

JS

$(document).ready(function () {
    $("#bundle-option-49").one("change", function () {
        $("#panel").show("slow");
        $("#bundle-option-49").change(function () {
            var selected = (this.options[this.selectedIndex].text);
            $("#1").click(function () {
                if ($(this).is(':checked')) {
                    //just to check if var is stored
                    //alert("You have selected" +selected);
                }
            });

        });

    });
});

CSS

#panel {
    display: none;
    padding-bottom: 5px;
}

我是JS的新手。我想知道我是朝着正确的方向前进，还是想要实现这一目标的更好方法。任何形式的帮助将不胜感激！

Answer 1

请看一下这个小提琴：my solution 如果这是你想做的事，请告诉我。

$(document).ready(function () {
    var selected;
    var selectedClass;
    $("#bundle-option-49").on("change", function () {
        $("#panel").show("slow");        
            selected = (this.options[this.selectedIndex].text);
            selectClass = ($(this).find('option:selected').attr('class'));
     $("#1").click(function () {
                if($('#1').is(':checked')) {                   
                    if(confirm("You have selected: " + selected))
                    {
                        $('option').hide();
                        $('option.'+selectClass).show();
                    }
                }
        });
    });
});

我更新了小提琴以处理'否'选项。 here

Answer 2

之间人身。我认为你的方向正确。我用上面的代码创建了一个jsfiddle。

http://jsfiddle.net/8dUN6/

你的js功能也做了小改动。对我认为不需要的事件发表评论。

$("#bundle-option-49").one("change", function () {
        $("#panel").show("slow");
        //$("#bundle-option-49").change(function () {
            var selected = (this.options[this.selectedIndex].text);
            $("#1").change(function () {
                if ($(this).is(':checked')) {
                    //just to check if var is stored
                    alert("You have selected" +selected);
                }
            });

        //});

    });

JQuery：根据是/否输入更改选项文本

2 个答案: