Comment faire apparaître un contrôle dynamiquement (après avoir choisi une option déroulante)

Question

Donc disons que j'ai un contrôle déroulant, et après que l'utilisateur utilise le menu déroulant, je veux une case à cocher et une étiquette à afficher, style AJAX, sans publication complète .

Comment puis-je implémenter quelque chose comme ça? Des exemples de code (ou des liens vers eux) seraient géniaux.

J'ai joué avec ce quelques utilisant UpdatePanels mais je ne peux pas le faire fonctionner ... droit

Answer 1

Vous pouvez y parvenir avec quelque chose comme ceci:

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

Note: ceci est l'utilisation jquery .

Vous pouvez voir et expérimenter un exemple de travail ici: http://jsbin.com/owoho

Answer 2

J'ai mis en place un petit exemple (en utilisant jQuery) pour vous aider à démarrer:

<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

Eh bien, si vous étiez Je veux juste poster des données sur le serveur quand la liste déroulante change que je voudrais juste utiliser jQuery (ma préférence).

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

Votre javascript pourrait ressembler à ceci.

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

     }; 

Il y a plusieurs façons de faire un appel ajax avec jQuery, mais je suis en utilisant celui-ci parce qu'il est le plus robuste et je ne sais pas ce que vous avez besoin de faire.