JQuery：根據是/否輸入更改選項文本

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

Yees。我認爲你的方向是正確的。我已經用上面的代碼創建了一個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); 
       } 
      }); 

     //}); 

    });