How to update div when on select change in jquery

Question

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:

<select name="mysel" id="msel">
    <option value="test1">Test1</option>
    <option value="test2">Test2</option>
    <option value="test3">Test3</option>
</select>

<div id="myresult"></div>

I would like the div to update with "This is test 2 and other info" if the user selects test2 and so on.

Any help on this would be greatly appreciated.

You need to escape your HTML. It's getting eaten by SO. – John Feminella Mar 10 '09 at 00:13 — John Feminella, Mar 10 '09 at 00:13

score 25 · Accepted Answer · edited Jan 18 '17 at 14:28

Try something like that :

<select id="choose">
    <option value="test1">Test1</option>
    <option value="test2">Test2</option>
    <option value="test3">Test3</option>
</select>
<div id="update"></div>

<script type="text/javascript">
    $('#choose').change(function(event) {
        $('#update').html('This is ' + $('#choose').val() + ' and other info');
    }); 
</script>

If you want to make it with AJAX, change the javascript function to something like that:

<script type="text/javascript">
    $('#choose').change(function(event) {
        $.post('info.php', { selected: $('#choose').val() },
            function(data) {
                $('#update').html(data);
            }
        );            
    });
</script>

And in your info.php, you'll have something like:

<?php

    $selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';
    echo("This is $selected and other info");

Thank you both for the great replies, i would would like for it to send the value of the select to a php file via ajax, in that way i can use a switch to send back data to the div. The php part i can do but executing the ajax call is where I am lost. Thanks again for the help. — , Mar 10 '09 at 00:23
Here you go, but please update (by adding at the bottom) the original question so people looking for a similar answer can benefit from it. — lpfavreau, Mar 10 '09 at 00:32

score 3 · Answer 2 · answered Mar 10 '09 at 00:13

3

The general idea:

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

With more specifics I can do better. ;-)

answered Mar 10 '09 at 00:13

Joel

19,175
2
63
83

score 2 · Answer 3 · answered Feb 17 '10 at 21:18

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>

score 1 · Answer 4 · answered Dec 26 '15 at 09:10

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

How to update div when on select change in jquery

4 Answers4

on document ready

on ajaxComplete

Linked