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种选择。或者点击年份，需要使用4年选项填充列表。但是如果你在月份和年份之间来回走动，我需要列表没有1000个相同的选择。

我在两个不同的选择中使用了jquery .show和.hide，但是即使年份选择被隐藏，表单也提交了它们，所以我不知道哪个是实际选择的。所以它必须是一个选择下拉

Answer 1

您可以在<select>隐藏时禁用它。通过这种方式，表单不会提交不可见的<select>

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

Answer 2

您可以尝试使用两个选项，但只是.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 3

如果您已经拥有正常工作的代码，并且只想在每次点击按钮时不再添加值，只需添加＆＃34; $（＆＃39; #subsptions＆＃39;）。empty（）＆＃34;现有buttonclick函数开头的脚本，或者在脚本顶部添加下面的函数。

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

使用基于按钮单击的Jquery填充选择下拉列表

3 个答案: