Question

my requirement is print the multiple selection data in dropdown list. i tried this but it doesn’t work. i dont know where i miss the logic. please correct me. here my code

    function getState() {
                ................
        document.getElementById('statediv').innerHTML=http.responseText;                        
                        http.send(params);

}

within body

    <div>   
        <h1 class="float-left">Create Annual Reports</h1>
        <div class="clear"></div>           
    </div>  
    <form  method="post" target="_blank"   action="<?=base_url();?>reports/prepareannualreport"  onsubmit="return fnValidate();" >
    <div id="registerform"> 
        <p></p> 
        <span class="float-left">State</span>
        <span id="statediv"><select name="multiple" id="multiple" multiple="multiple"><option value="0">(Select)</option></select>
</span>

In the dropdown list data successfully displayed. now when i choose multiple data in dropdown i want to print those values so i used the following function to print.

<script>
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html(" <b>Multiple:</b> " + 
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

</script>

if i replace body content with the following functions it prints the selected data in dropdown.

<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

Answer 1

$("select").live('click', function(){
    if($("option").is(":selected")) {
        $("p").append("Option Selected"+$(this).val()+"<br />")
    }
});

<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

<p></p>

Working Jfiddle @ http://jsfiddle.net/xNmX2/