如果選擇按鈕，jQuery 顯示/隱藏選項

Question

我如何將 SELECT 表單更改為 TAB 。

我有這個代碼：

 var $clonedOpts = $("#layout_select").children().clone(); $("#column_select").change(function() { var $layOpts = $clonedOpts.clone().filter('[value^=' + $(this).val() + ']'); $("#layout_select").html($layOpts); }).change();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="column_select" id="column_select"> <option value="col1">1 column</option> <option value="col2">2 column</option> <option value="col3">3 column</option> </select> <select name="layout_select" id="layout_select"> <!--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1">none</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_ms">layout 1</option> <option value="col2_sm">layout 2</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm" selected="selected">layout 4</option> <option value="col3_sms">layout 5</option> </select>

我想更改此代碼（選擇選項）：

 <select name="column_select" id="column_select"> <option value="col1">1 column</option> <option value="col2">2 column</option> <option value="col3">3 column</option> </select>

對於此代碼（TAB 表格）：

 <div class="tab"> <button>TAB1</button> <button>TAB2</button> <button>TAB3</button> </div>

我應該在 javascript 中改變什么？

Answer 1

您可以使用data-屬性在按鈕上附加值

並將事件更改為click

 var $clonedOpts = $("#layout_select").children().clone(); $(".tab button").click(function() { var $layOpts = $clonedOpts.clone().filter('[value^=' + $(this).data("val") + ']'); $("#layout_select").html($layOpts); }); $(".tab button").eq(0).click();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab"> <button data-val="col1">TAB1</button> <button data-val="col2">TAB2</button> <button data-val="col3">TAB3</button> </div> <select name="layout_select" id="layout_select"> <!--Below shows when '1 column' is selected is hidden otherwise--> <option value="col1">none</option> <!--Below shows when '2 column' is selected is hidden otherwise--> <option value="col2_ms">layout 1</option> <option value="col2_sm">layout 2</option> <!--Below shows when '3 column' is selected is hidden otherwise--> <option value="col3_mss">layout 3</option> <option value="col3_ssm" selected="selected">layout 4</option> <option value="col3_sms">layout 5</option> </select>