Question

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

Answer 1

你可以这样做

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


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

Answer 2

在服务器端，您应该获得单选按钮单击事件，并且必须重新绑定下拉列表。

Answer 3

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

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

    });
});

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

        }); 

    });


});

在我选择＆＃34;午餐＆＃34;之后，我修改了一些代码。或＆＃34;晚餐＆＃34;然后只出现时间段的下拉菜单。

希望有一天这对某人有帮助。：）

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

4 个答案: