Javascript：如何加載基於廣播選擇的下拉選項

Question

我正在創建一個簡單的表單，允許用戶輸入特定報表的頻率。他們以前會允許用戶輸入一週中的幾天。隨着對某些報告的需求發生變化，他們增加了工作日和當月的日期作爲選項。現在我將創建一個界面，以便用戶希望用戶通過單選按鈕選擇「星期幾」，「每月的幾天」或「工作日」，並根據他們的選擇選擇不同的下拉選項。

<td>Day:</td> <td> <div class="controls"> 
           <fieldset id="Group1" name="Group1"> 
            <label><input id="Radio1" name="Radio1" type="radio" value="day" />Days of Week<br /></label> 
            <label><input id="Radio1" name="Radio1" type="radio" value="month_day" />Days of Month<br /></label> 
            <label><input id="Radio1" name="Radio1" type="radio" value="work_day" />Workday<br /></label> 
           </fieldset> 
          </div> 
           <fieldset id="Group2" name="Group2"> 
            <select class="form-control" id="days" name="newday[]" multiple> 
             <option value="monday">Monday</option> 
             <option value="tuesday">Tuesday</option> 
             <option value="wednesday">Wednesday</option> 
             <option value="thursday">Thursday</option> 
             <option value="friday">Friday</option> 
             <option value="saturday">Saturday</option> 
             <option value="sunday">Sunday</option> 
             <option value="01">01</option> 
             <option value="02">02</option> 
             . 
             . 
             . 
             <option value="31">31</option> 
             <option value="wd 1">WD 1</option> 
             <option value="wd 2">WD 2</option> 
             . 
             . 
             . 
             <option value="wd 25">WD 25</option> 
            </select> 
           </fieldset> 

         </td> 

我想知道什麼方法適用於如我是新來的無論是阿賈克斯或jQuery的。星期一至星期五是選擇「星期幾」時顯示的選項，如果選擇「星期幾」，則爲0 - 31，如果選擇「工作日」，則選擇1天 - 25天。感謝您提前幫助。 :)

Answer 1

$(function() { 
    // Group the select's options by the radio they correspond to 
    var options = {}, 
     radios = $("#Group1 :radio"); 
    options[radios.eq(0).val()] = []; 
    options[radios.eq(1).val()] = []; 
    options[radios.eq(2).val()] = []; 
    $("#Group2 select option").each(function(i, el) { 
     var e = $(el); 
     if (i < 7) 
      options[radios.eq(0).val()].push(e); 
     else if (i < 10) //38 
      options[radios.eq(1).val()].push(e); 
     else 
      options[radios.eq(2).val()].push(e); 
     e.remove(); 
    }); 

    // On radio's change, empty the select and append the options that correspond to the selected radio 
    $("#Group1 :radio").on("change", function() { 
     $("#Group2 select").empty(); 
     var arr = options[$(this).val()]; 
     for (var i = 0; i < arr.length; i++) 
      $("#Group2 select").append(arr[i]); 
    }).filter(":selected").trigger("change"); 
}); 

http://jsfiddle.net/paska/85w47nbj/1/

還要注意的是，你不應該有相同的ID不止一個元素。

Answer 2

我想如果你使用jQuery非常容易。在這裏看看下面的運行代碼。只有你需要刪除所有單選按鈕的相同ID，否則難以選擇該DOM，因爲ID是唯一的，否則就很好。

function showSameGroup(target1, target2, el){ 
 
    if(target1 == el){ 
 
     $(target2).find("option").show().not("."+el).hide(); 
 
    } 
 
}; 
 
$("#Group1 input[type='radio']").click(function(){ 
 
var s1 = $(this).val(), s2 = $("#days"); 
 
    
 
    if(s1 == "day"){ 
 
     showSameGroup(s1, s2, "day"); 
 
    } 
 
    else if(s1 == "mday"){ 
 
     showSameGroup(s1, s2, "mday"); 
 
    } 
 
    else{ 
 
     showSameGroup(s1, s2, "wday"); 
 
    } 
 
});

<td>Day:</td> <td> <div class="controls"> 
 
     <fieldset id="Group1" name="Group1"> 
 
      <label><input name="Radio1" type="radio" value="day" />Days of Week<br /></label> 
 
      <label><input name="Radio1" type="radio" value="mday" />Days of Month<br /></label> 
 
      <label><input name="Radio1" type="radio" value="wday" />Workday<br /></label> 
 
     </fieldset> 
 
    </div> 
 
     <fieldset id="Group2" name="Group2"> 
 
      <select class="form-control" id="days" name="newday[]" multiple> 
 
       <option class="day" value="monday">Monday</option> 
 
       <option class="day" value="tuesday">Tuesday</option> 
 
       <option class="day" value="wednesday">Wednesday</option> 
 
       <option class="day" value="thursday">Thursday</option> 
 
       <option class="day" value="friday">Friday</option> 
 
       <option class="day" value="saturday">Saturday</option> 
 
       <option class="day" value="sunday">Sunday</option> 
 
       <option class="mday" value="01">01</option> 
 
       <option class="mday" value="02">02</option> 
 
       
 
       <option class="mday" value="31">31</option> 
 
       <option class="wday" value="wd 1">WD 1</option> 
 
       <option class="wday" value="wd 2">WD 2</option> 
 
      
 
       <option class="wday" value="wd 25">WD 25</option> 
 
      </select> 
 
     </fieldset> 
 

 
</td> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

我希望它的作品。