如果选择了单选按钮，则更改下拉选项答案

【问题标题】：Change dropdown options if radio button selected如果选择了单选按钮，则更改下拉选项
【发布时间】：2015-09-29 12:59:02
【问题描述】：

我选择了 3 个单选按钮，如果用户选择其中一个，我希望除了 2 个选项之外的所有选项都从页面下方的下拉列表中消失，有人可以帮忙吗？如果有人选择第三个选项（id="notify_type3"），那么我只希望下拉菜单显示初始“选择”（<option value="">Please select</option>）和另一个选项（例如，<option value="4">Option 4</option>），如果其他 2 个单选按钮被选中然后它需要显示整个列表。

Staff member
<input type="radio" name="notify_type" id="notify_type1" value="new member of staff">
Editorial Freelance
<input type="radio" name="notify_type" id="notify_type2" value="new freelance user">
Contractor/Consultant
<input type="radio" name="notify_type" id="notify_type3" value="new contractor user">

<select class="dropdown" name="starter_company" id="starter_company">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以这样做

$("#notify_type1").click(function(){
   $('.selDiv option[value="SEL1"]') .remove() 
})


// SEL1 will be value you desired to remove after clicking that radio button

【讨论】：

【解决方案2】：

我可能会完全隐藏下拉菜单，直到用户选择一个选项，然后再显示它。但我会做这样的事情，这样，如果他们将单选按钮更改回来，您的选项将重新出现。

Here's a fiddle.

$("input[type='radio'][name='notify_type']").change(function(){

    var selected = $("input[type='radio'][name='notify_type']:checked").val();

    if(selected == "new contractor user") var opts = [
        {name:"Please Select", val:""},
        {name:"Option 4", val:"4"}
    ];

    else var opts = [
        {name:"Please Select", val:""},
        {name:"Option 1", val:"1"},
        {name:"Option 2", val:"2"},
        {name:"Option 3", val:"3"},
        {name:"Option 4", val:"4"}
    ];

    $("#starter_company").empty();

    $.each(opts, function(k,v){

        $("#starter_company").append("<option value='"+v.val+"'>"+v.name+"</option>");

    });
});

【讨论】：

【解决方案3】：

在服务器端你应该得到单选按钮点击事件，你必须重新绑定下拉列表。

【讨论】：

【解决方案4】：

谢谢Pamblam！！！
你救了我的命！！！
对不起，我还不能评论，但真的要感谢我的救命恩人~！！！
这是我的工作代码：

jQuery(document).ready(function(){$(".time-section").addClass("hidden");

    $("input[type='radio'][name='time-select']").change(function () {
            var timeSelected = $("input[type='radio'][name='time-select']:checked").val();
            $(".time-section").removeClass("hidden");

        if (timeSelected == "Lunch") var timeOpts = [
                {name:"Lunch: 12:00pm",val:"Lunch: 12:00pm"},
                {name:"Lunch: 12:30pm",val:"Lunch: 12:30pm"},
                {name:"Lunch: 1:00pm",val:"Lunch: 1:00pm"},
                {name:"Lunch: 1:30pm",val:"Lunch: 1:30pm"}
            ]

        else if (timeSelected == "Dinner") var timeOpts = [
                {name:"Dinner: 6:30pm - 8:30pm",val:"Dinner: 6:30pm - 8:30pm"},
                {name:"Dinner: 8:30pm - 10:30pm",val:"Dinner: 8:30pm - 10:30pm"}
            ]

        $("#Times").empty();

        $.each(timeOpts, function(k,v){

            $("#Times").append("<option value='"+v.val+"'>"+v.name+"</option>");

        }); 

    });


});

这里我修改了一些代码，所以在我选择了“午餐”或“晚餐”之后，只会出现时间段的下拉菜单。

希望有一天这对某人有所帮助。 :)

【讨论】：