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 个答案: