How to update div when on select change in jquery

前端 未结 4 1481
别那么骄傲
别那么骄傲 2020-12-09 13:10

I have a form with a select field and a div i wish to update with a value depending on what the user selects.

Example:


                        
    
提交评论

  • 2020-12-09 13:48

    The general idea:

    $(function() {
       $("#msel").change(function(){
          $("#myresult").html("This is " + $("#msel").val() + " and other info");
       });
    });
    

    With more specifics I can do better. ;-)

    0 讨论(0)
  • 2020-12-09 13:57

    on document ready

    <script type="text/javascript">
        $(document).ready(function(){
            $('#choose').change(function(event) {    
              $.post(
               'info.php',
                $(this).serialize(),
                function(data){
                  $("#update").html(data)
                }
              );
              return false;   
            });   
        });
    

    on ajaxComplete

    <script type="text/javascript">
        $(document).ajaxComplete(function(){
            $('#choose').change(function(event) {    
              $.post(
               'info.php',
                $(this).serialize(),
                function(data){
                  $("#update").html(data)
                }
              );
              return false;   
            });   
        });
    

    0 讨论(0)
  • 2020-12-09 14:00

    This is the simplest way I've found do it (from this handy forum)

    <!-- the select -->
    <select id="thechoices">
        <option value="box1">Box 1</option>
        <option value="box2">Box 2</option>
        <option value="box3">Box 3</option>
    </select>
    
    <!-- the DIVs -->
    <div id="boxes">
        <div id="box1"><p>Box 1 stuff...</p></div>
        <div id="box2"><p>Box 2 stuff...</p></div>
        <div id="box3"><p>Box 3 stuff...</p></div>
    </div>
    
    <!-- the jQuery -->
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript">
    
    $("#thechoices").change(function(){
        $("#" + this.value).show().siblings().hide();
    });
    
    $("#thechoices").change();
    
    </script>
    
    0 讨论(0)
  • 提交回复
    热议问题