Question

我的困境是我找到了一个代码，用于隐藏和显示我的数据以供选项选择。

此功能的工作原理是能够从选项表中选择一个选项，第二个选项表显示相同的选项而不重复上一个选项列表。

我使用的当前脚本仅适用于前5个选项。我需要找到另一种方法来使所有选择都有效。

这是客户可以选择的项目集合。第二个选择的目的是帮助进一步编写后端编码以确认客户订单。

- HTML选择表1 -

<select name="column_select" id="column_select">
<option value="0" disabled selected>Choose Options</option>
<option value="166.25">Logo</option>
<option value="256.25">Brochure(6pages)</option>
<option value="35.25">Print Illustration</option>
<option value="120.25">Vector Illustration</option>
<option value="41.25">Flyer/Handbill</option>
<option value="41.25">Flyer(template)</option>
<option value="66.75">Banner</option>
<option value="250">Billboard</option>
<option value="131.25">Business Card</option>
<option value="412.75">Website(static)</option>
<option value="1212.75">Website(dynamic)</option>
<option value="262.75">Website(Template)</option>
<option value="60.25">Photography (1HR)</option>
<option value="106.25">Photography (3HR)</option>
<option value="231.25">Photography (6HR)</option>
<option value="326.25">Photography (8HR)</option>
<option value="0">N/A</option></select>

- HTML选择表2 -

<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="166.25">Logo</option>

<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="256.25">Brochure(6pages)</option>

<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="35.25">Print Illustration</option>

<!--Below shows when '4 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Vector Illustration</option>

<!--Below shows when '5 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Flyer/Handbill</option>

<!--Below shows when '6 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Flyer(template)</option>

<!--Below shows when '7 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Banner</option>

<!--Below shows when '8 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Website(Static)</option>

<!--Below shows when '9 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Website(Dynamic)</option>

<!--Below shows when '10 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Website(Template)</option>

<!--Below shows when '11 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120.25">Photography (1HR)</option>

<!--Below shows when '12 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120">(3HR)</option>

<!--Below shows when '13 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120">(6HR)</option>

<!--Below shows when '14 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="120">(8HR)</option>

<!--Below shows when '15 column' is selected is hidden otherwise-->
<option value="0">Default</option>
<option value="0">N/A</option></select>

- JavaScript -

script src="https://code.jquery.com/jquery-1.6.4.js"

    $(document).ready(function() {
        $("#column_select").change(function () {
            $("#layout_select")
                .find("option")
                .show()
                .not("option[value*='" + this.value + "']").hide();

            $("#layout_select").val(
                $("#layout_select").find("option:visible:first").val());

        }).change();
    });

显示和隐藏选项选择HTML，Javascript

0 个答案: