如何有一个控制动态显示（选择一个下拉选项后）

Question

所以说我有一个下拉的控制，并且用户使用下拉之后，我想一个复选框和标签出现，AJAX风格，没有一个完整的回发。

我如何能实现这样的事情？代码示例（或指向它们的链接）会很好。

我打得四处这一些使用的UpdatePanel，但我不能获得工作的权利......

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调用，但我用这一个，因为它是最强大的，我不知道你需要它做什么。