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>

我希望它的作品。