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

Change dropdown options if radio button selected

本文关键字：选项 选择 单选按钮 如果      更新时间：2023-09-26

我选择了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>

你可以这样做

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

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

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

给你一把小提琴。

$("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>");
    });
});

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

谢谢你!
你救了我的命!
对不起，我还不能评论，但真的想感谢我的救命恩人~!!
以下是我的工作代码:

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>");
        }); 
    });

});


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

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

相关文章：