代码之家 › 专栏 › 技术社区 › Albert

如何动态显示控件(选择下拉选项后)

asp.net-ajax ajax vb.net javascript asp.net

Albert · 技术社区 · 14 年前

假设我有一个下拉控件,在用户使用下拉控件后,我希望显示一个复选框和标签,Ajax样式,而不需要完整的回发。

我怎样才能实现这样的功能?代码(或链接到代码)的例子会很好。

我用updatepanels玩过这个,但是我不能让它正常工作…

3 回复 | 直到 14 年前

M4N 14 年前

你可以这样做:

<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

karim79 14 年前

我总结了一个小例子(使用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>

WVDominick 14 年前

好吧,如果你只是想在DropDownlist更改时将一些数据发布到服务器上,那么我只会使用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调用有很多种方法,但是我使用这个方法是因为它是最健壮的,我不确定您还需要它做什么。