Изменение выпадающих параметров, если выбрана кнопка выбора радио

У меня есть 3 переключателя, если пользователь выбирает один из них, я хочу, чтобы все из 2 вариантов исчезли из выпадающего списка дальше по странице, может ли кто-нибудь помочь? Если кто-то выбирает третий вариант (id = "notify_type3"), то я хочу, чтобы выпадающее меню отображало начальный «select» ( <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,

0

Ответов: 4

0 принят

Скорее всего, я скрою раскрывающееся меню, пока пользователь не выберет опцию, а затем отобразит ее. Но я бы сделал что-то подобное, таким образом, если они изменят переключатель, ваши параметры снова появятся.

Вот скрипка.

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

    });
});
1

вы можете это сделать

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


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

На стороне сервера вы должны получить событие нажатия кнопки переключателя, и вы должны переустановить раскрывающийся список.

0

Спасибо, Памблум !!!
Вы спасли мою жизнь!!!
Извините, я не могу комментировать, но очень хочу поблагодарить спасителя жизни ~ !!!
Вот мои рабочие коды:

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

        }); 

    });


});


Здесь я немного изменил коды, поэтому после того, как я выбрал «Обед» или «Ужин», появится только раскрывающееся меню временного интервала.

Надеюсь, что это кому-то поможет. :)

JavaScript, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика