Question

我有2个下拉列表和一个文本框。我设法做了一个功能，在第一个下拉列表中选择某个值后，会出现第二个下拉列表。但我无法使第3个ID（文本框）出现在它对第2个下拉列表做出反应的位置。

这是我到目前为止所拥有的

$(document).ready(function () {
        change($("#<%=ddlMailJob.ClientID%>"));

        $("#<%=ddlMBR.ClientID%>").change(function () {
            change($(this));
        });
    });

    function change(obj) {
        if ($(obj).val() == "Y") {
            $('#lblMBRY').show();
            $('#ddlMBRY').show();
        }
        else {
            $('#lblMBRY').hide();
            $('#ddlMBRY').hide();

            $('#lblMBRO').hide();
            $('#txtMBRO').hide();
        }
    }

我想制作

$('#lblMBRO').hide(); $('#txtMBRO').hide();

选择第二个下拉列表时会出现

，但我不知道应该如何处理它。使它出现的值应该是＆＃34;其他＆＃34;

对不起。这是我的HTML

                <td>
                <asp:DropDownList ID="ddlMBR" runat="server">
                    <asp:ListItem Selected="True" Value="empty">- - -</asp:ListItem>
                    <asp:ListItem Value="Y">Yes</asp:ListItem>
                    <asp:ListItem Value="N">No</asp:ListItem>
                </asp:DropDownList>
            </td>

            <td class="colHead" id="lblMBRY">Mailing Job</td>
            <td id="ddlMBRY">
                <asp:DropDownList ID="ddlMailJob" runat="server">
                    <asp:ListItem Selected="True" Value="empty">- - -</asp:ListItem>
                    <asp:ListItem Value="dlv">Deliver</asp:ListItem>
                    <asp:ListItem Value="pck">Pickup</asp:ListItem>
                    <asp:ListItem Value="Others">Others</asp:ListItem>
                </asp:DropDownList>
            </td>

            <td class="colHead" id="lblMBRO">Others</td>
            <td id="txtMBRO">
                <asp:TextBox ID="txtOther" runat="server"></asp:TextBox>
            </td>

Answer 1

由于你没有提供你的html，我为此创建了示例html和脚本。可能这可以帮到你 HTML

<select id="first">
   <option value="">Select</option>
   <option value="Y">yes</option>
   <option value="N">no</option>
</select>
<select class="slct" id="second">
   <option value="">Select</option>
   <option value="Y">yes</option>
   <option value="N">no</option>
</select>
<select class="slct" id="third">
   <option value="">Select</option>
   <option value="Y">yes</option>
   <option value="N">no</option>
</select>

脚本

$(".slct").hide();
$("select").change(function () {

  if ($("#first").val() == "Y") 
    {

      $("#second").show();
      if ($("#second").val() == "Y")
      {

        $("#third").show();
      }
      else
      {
         $("#third").hide();
      }
    } 
  else
  {
      $(".slct").hide();
  }
});

Fiddle

如何显示第三个id属性？

1 个答案: