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

我认为如果你使用 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>

我希望它有效。

Answer 2

$(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 的元素。