Question

所以说我有一个下拉控件，在用户使用下拉菜单后，我想要一个复选框和标签出现，AJAX样式，没有完整的回发。

我该如何实现这样的东西？代码的例子（或它们的链接）会很棒。

我使用更新面板玩了一些，但我无法正常工作......

Answer 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

Answer 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>

Answer 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调用，但我使用的是这个，因为它是最强大的，我不确定你还需要它做什么。

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

3 个答案: