為下拉菜單選擇其他復選框選項

Question

該頁面包含2個下拉菜單和1個復選框。

Q03中的復選框選項應取決於Q01和Q02中的用戶選擇。

例如，如果用戶選擇Q01中的“淋浴”和Q02中的“ Burke”作為設計。

在這種情況下，Q03應該是單個特定的復選框值。

碼

<html>
A) What are you building?
<br />
<select id="build"> 
<option value="Change">Change Rooms</option>
 <option id="showers" value="showers ">showers </option>  
<option id="Toilets " value="Toilets ">Toilets</option>
<option value="All">All</option>
</select>

<br />
B) Choose your design:
<br />
<select id="design">
<option  hidden>Choose the Design</option>
<option id="Burke" value="Burke">The Burke</option>
<option value="Burke">The Sturt</option>
<option value="Wentworth">The Wentworth</option>

</select>
<br/>

C) Choose your material


<div id="append_checkbox">
</div>
</html>
<script>


jQuery(function() {
        jQuery('#build').on('change', function() {
                 var slct = jQuery(this).prop("selectedIndex");
                 var amount = jQuery('#build').val();

//alert(amount);


                 if(slct == 1 && amount=='showers')
                     {

                       $("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>13mm Compact Laminate only');
                      }
                  else if (slct == 2 && amount=='showers')
                      {
                      $("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>James Hardie Fibre Cement only');
                      }

        });
});
</script>

通過瀏覽器運行時，即使沒有控制台錯誤，也不會顯示預期結果。

預計在這兩個實例中將獲得不同的復選框。

Answer 1

您這里出了很多問題，

value="showers "應該為value="showers" （無空格）
您不應該使用索引作為檢查

看一下這段代碼，我添加了一個條件，您可以根據需要添加其他條件。

 $('#build,#design').on('change', function() { var amount = $('#build').val(); var designVal = $('#design').val(); //alert(amount); if (amount == 'showers' && designVal == 'Burke') { $("#append_checkbox").html('<input type="checkbox" name="designs[]" value="13mm Compact Laminate only"/>13mm Compact Laminate only'); } //your other conditions });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> A) What are you building? <br /> <select id="build"> <option value="Change">Change Rooms</option> <option id="showers" value="showers">showers </option> <option id="Toilets " value="Toilets">Toilets</option> <option value="All">All</option> </select> <br /> B) Choose your design: <br /> <select id="design"> <option hidden>Choose the Design</option> <option id="Burke" value="Burke">The Burke</option> <option value="Burke">The Sturt</option> <option value="Wentworth">The Wentworth</option> </select> <br/> C) Choose your material <div id="append_checkbox"> </div>

為下拉菜單選擇其他復選框選項

問題描述

1 個解決方案

解決方案1
1 已采納 2018-10-12 04:34:07

為下拉菜單選擇其他復選框選項

問題描述

1 個解決方案

解決方案1 1 已采納 2018-10-12 04:34:07

解決方案1
1 已采納 2018-10-12 04:34:07