Populate Выберите выпадающий список с Jquery на основе нажатия кнопки

Question

У меня есть 2 кнопки и выберите из выпадающего списка

<button type="button" name="btnmonth" id="btnmonth">Monthly</button> 
<button type="button" name="btnyear" id="btnyear" >Yearly</button> 

<select id="subscriptions"> 
    <option value="default">Please Choose a Plan</option> 
</select> 

на кнопку мыши месяца мне нужно выберите выпадающий список, заполненный 4 вариантов. Или щелчок года, в который должен быть заполнен список с помощью четырехлетнего выбора. Но если вы идете туда и обратно между месяцем и годом, мне нужен список, чтобы не иметь 1000 одинаковых выборов.

Я использовал jquery .show и .hide на двух разных вариантах, но форма представляла их оба, даже если год выбора был скрыт, поэтому я не знал, что было на самом деле выбрано. Таким образом, это должен быть один выбор, который выпадает

Answer 1

Вы можете использовать два выбирает, как вы пытались, но только .hide() не удаляет его из формы. Чтобы удалить его из формы вы можете отключить его, используя $.prop('disabled', boolean)

<button type="button" name="btnmonth" id="btnmonth">Monthly</button> 
<button type="button" name="btnyear" id="btnyear" >Yearly</button> 

<select id="subscriptions-monthly" style="display: none" disabled> 
    <!-- Monthly select options --> 
</select> 

<select id="subscriptions-yearly" style="display: none" disabled> 
    <!-- Monthly select options --> 
</select> 

В JavaScript:

$('#btnmonth').click(function(event) { 
    $("#subscriptions-yearly").hide().prop('disabled', true); 
    $("#subscriptions-monthly").show().prop('disabled', false); 
}); 

$('#btnmonth').click(function(event) { 
    $("#subscriptions-monthly").hide().prop('disabled', true); 
    $("#subscriptions-yearly").show().prop('disabled', false); 
}); 

Это должно работать для вас.

Answer 2

Вы можете отключить <select>, пока он скрыт. Таким образом, форма не будет представить невидимый <select>

<select disabled id="subscriptions"> 
    <option value="default">Please Choose a Plan</option> 
</select> 

Answer 3

Если у вас уже есть рабочий код и вы просто не хотите добавлять значения при каждом нажатии кнопки, просто добавьте скрипт «$ ('# subscriptions!). Empty() в начале существующих функций buttonclick или добавьте функцию ниже в начало ваших скриптов.

$('#btnmonth, #btnyear').click(function() { 
    $('#subscriptions').empty() 
});