如何动态显示控件（选择下拉选项后）答案

【问题标题】：How to have a control dynamically appear (after choosing a dropdown option)如何动态显示控件（选择下拉选项后）
【发布时间】：2011-01-23 20:07:00
【问题描述】：

假设我有一个下拉控件，并且在用户使用下拉列表后，我希望出现一个复选框和标签，AJAX 样式，没有完整的回发。

我怎样才能实现这样的东西？代码示例（或指向它们的链接）会很棒。

我使用更新面板玩过这个，但我无法让它正常工作......

【问题讨论】：

为什么你需要 any 回发只是为了显示一个复选框和标签？
是的，我只是想强调我不想做回发……我想我可以更好地措辞

标签： asp.net javascript vb.net ajax asp.net-ajax

【解决方案1】：

您可以通过以下方式实现此目的：

<script type="text/javascript">
function showOptions(val) {
  $('.option').hide();
  $('.option' + val).show();
}
</script>

<style>
.option { border:solid 1px blue; display: none; }  
</style>

<select id="dropdown" onchange="showOptions(this.value)">
  <option value="1">select an option:</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<div class="option option1">put controls for option 1 here</div>
<div class="option option2">put controls for option 2 here</div>
<div class="option option3">put controls for option 3 here</div>

注意：这里使用的是jquery。

您可以在此处查看和试验一个工作示例：http://jsbin.com/owoho

【讨论】：

【解决方案2】：

我整理了一个小例子（使用 jQuery）来帮助您入门：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // bind an event handler to the select's change event
    $("#testSelect").change(function() {

        // create a label from the text of the selected option
        var $label = $("<label>" + $(this).text() + "</label>");

        // create a checkbox
        var $checkbox = $('<input type="checkbox"/>');

        // append the label and checkbox to the next div, reveal it with animation
        $(this).next("div")
               .empty()
               .append($label)
               .append($checkbox)
               .show("slow");
    });
});
</script>

<select id="testSelect">
    <option value="foo" selected="selected">Hello</option>
    <option value="test">Wooo</option>
</select>
<div style="display:none"></div>

【讨论】：

我更喜欢@Martin 的方法，即在页面上隐藏项目，然后根据需要显示它们。如果可能，最好避免在代码中构建标记。

【解决方案3】：

好吧，如果您只是想在下拉列表更改时将一些数据发布到服务器，那么我只会使用 jQuery（我的偏好）。

    <asp:DropDownList ID="DropDown" runat="server" onchange="javascript: ajaxCall();">
    </asp:DropDownList>

那么你的 javascript 可能看起来像这样。

        function ajaxCall() {

        $.ajax({
            type: "POST",
            url: "Services/Services.aspx/SomeMethod",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}", // send some data if you need to
            beforeSend: function() {
              //do some things before the request is made
            },
            success: function(msg) {
                chkBox.show();
                spanOrDivName.show();
            }
        });

       };

有很多方法可以使用 jQuery 进行 ajax 调用，但我正在使用这个，因为它是最强大的，我不确定你还需要它做什么。

【讨论】：

我不认为@Albert 在这里询问如何与服务器交互 - 只是如何根据用户的操作在页面上显示和隐藏控件。
你可能是对的，但我添加了 ajax 代码，因为他说他想做“AJAX 风格”。我看到了涵盖您建议的其他示例，所以我添加了一些不同的内容。