Как динамически отображать элемент управления (после выбора выпадающего меню)

Question

Скажем, у меня есть элемент управления раскрывающимся списком, и после того, как пользователь использует раскрывающийся список, я хочу, чтобы появился флажок и метка в стиле AJAX без полной обратной передачи.

Как я могу реализовать что-то подобное?Примеры кода (или ссылки на них) были бы великолепны.

Я поиграл с этим, используя панели обновления, но не могу заставить его работать правильно ...

Answer 1

Я собрал небольшой пример (с использованием 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 2

Вы можете достичь этого с помощью чего-то вроде:

<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 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();
            }
        });

       };

Есть много способов сделать ajax-вызов с помощью jQuery, но я использую этот, потому что он самый надежный, и я не уверен, что вам еще нужно сделать.