Question

我之前曾询问过如何根据使用JQuery的下拉列表显示多个字段： Show multiple fields based on dropdown

但是当我的页面上有其他下拉字段时，这不再有效。我确实想知道它干扰了其他JavaScript / JQuery元素，但删除它们并没有解决问题。我也尝试将元素放入单独的UL和DIVS中，但没有运气。有人可以帮忙吗？

在我的示例中，当选择“接管现有手机”时，它应显示“现有手机号码”，但是当“现有PC”仍然列在我的页面上时，它不会显示。

HTML：

<ul>
    <li>
        <label for>NS - Mobile</label>
        <select class="selectmenu" id="_1_1_81_1" name="_1_1_81_1" onchange="markDirty();">
            <option value="" >&lt;None&gt;</option>
            <option value="Mobile" >Mobile</option>
            <option value="Blackberry" >Blackberry</option>
            <option value="otheros" >Taking over Existing Mobile</option>
        </select>
    </li>

    <li class="osother">
        <label for>NS - Existing Mobile No</label>
        <input class="valueEditable" TYPE="text" name="_1_1_83_1" title="NS - Existing Mobile No" id="_1_1_83_1" value="[LL_FormTag_1_1_83_1 /]" size="12" MAXLENGTH="11" ONCHANGE="markDirty();">
    </li>

    <li>
        <label for>NS - Existing PC</label>
        <select class="selectMenu" id="_1_1_84_1" name="_1_1_84_1" onchange="markDirty();">
            <option value="" >&lt;None&gt;</option>
            <option value="Yes" >Yes</option>
            <option value="No" >No</option>
        </select>
    </li>
</ul>

JQ：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("select").change(function () {
        $("select option:selected").each(function () {
            if ($(this).attr("value") == "otheros") {
                $(".osother").show();
            } else {
                $(".osother").hide();
            }
        });
    }).change();
});
</script>

CS： .osother {显示：无;}

我的其他JQ就在这里并折叠页面上的部分 - 可能无关紧要：

<script type="text/javascript" src="[LL_SUPPORTPATH /]core/jquery.collapsible.js">     </script>
<script type="text/javascript">
$(document).ready(function() {
//collapsible management
    $('.collapsible').collapsible({
        defaultOpen: 'section1,section2,section3,section4,section5'
    });
});
</script>

此处还有一些JavaScript添加了TABS和Date下拉列表，但是在没有这些元素的情况下进行了测试，似乎仍然没有工作。

Answer 1

基本上，当您实际应该观察ID为select的那个时，您正在遍历页面中的每个_1_1_81_1并检查其值。

此外，您可以简化代码：

$(function () {
    // Observe the particular select for changes in its value.
    // As every element in the page should have its on ID, you can
    // select it straight away (omitting the type - select). 
    $("#_1_1_81_1").on("change", function () {
        // Toggle the input visibility based on the selected value.
        // The .val() method works here just like for every type of
        // input. You don't need to go through all the select options
        // and test their values.
        $(".osother").toggle($(this).val() == "otheros");
    });
});

Demo

jQuery .toggle()

注意：此答案基于您提供的代码。如果涉及任何其他要求或代码，您应该在问题中说明。

根据下拉列表显示多个字段 - 当页面上显示其他下拉列表时不起作用

1 个答案: