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> 

Я задаюсь вопросом, какой метод подходит для таких, как я новичок в любой Ajax или JQuery. Понедельник - пятница показаны варианты, если они выбрали «Дни недели», 0 - 31, если «Дни месяца», wd 1 - wd 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/

Также обратите внимание, что вы не должны иметь более одного элемента с одинаковым идентификатором.

Answer 2

Я думаю, что если вы используете jQuery довольно легко. Взгляните на приведенный ниже код. Только вам нужно удалить идентичные идентификаторы для всех переключателей, иначе было бы труднее выбрать этот DOM, поскольку идентификаторы уникальны, иначе все в порядке.

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>

Я надеюсь, что это работает.