how to add more dropdown options to it with ajax or jquery?

Question

In my code new value through textbox is getting added to dropdown and stored in database but the problem is that, previous dropdwn list like here say rohit,viraj etc is not getting displyed along with new inserted value. how to show all option list along with new added one? is there any perfect way to do this using array? please help...

htmlcode

`html code:
<select class="deligates1" id="deligates1" name="deligates1[]"   size="1" multiple>
<option value="">--select--</option>
<option value="rohit">ROHIT</option>
<option value="viraj">VIRAJ</option>
<option value="sachin">SACHIN</option>
</select>
<span style="cursor:pointer;background-color:lightgoldenrodyellow;">Add delegates here</span><span><input type="text" id="write_dele" name="write_dele" >
<input type="button" id="add_dele"  value="add"></span>
`

script code

:<script>

     $(document).ready(function(){
        $("#add_dele").click(function(){
            var delegate = $("#write_dele").val();
            $.ajax({
                type:'POST',
                data:'q='+delegate,
                url:'add1.php',
                success:function(new_delegate){
                             $("#deligates1").html(new_delegate);
                }               
            });         
        }); 

    });


</script>

add1.php:

<?php 

$new_delegate=$_POST['q'];

$con=mysql_connect("localhost","root","");
mysql_select_db("task",$con);
echo '<option value="'.$new_delegate.'" >'.$new_delegate.'</option>';

?>

Answer 1

.html() Replace the entire select option with your new option

Try with this

$("#deligates1").append(new_delegate); // it will add your new option in select box