0

How can I refresh a select tag after adding new item into it using Jquery.

HTML :

    <select id="exam_select" class="exam_select" name="exam_select" value="Select Exam">
        <option value="">Select Exam</option>
        <?php
        while($row=mysql_fetch_assoc($exam)):
        ?>
        <option value="<?php echo $row['e_code'];?>"><?php echo $row['e_code'];?></option>
        <?php
        endwhile;
        ?>
    </select>

    <input type="text" id="add_new_deg_field" class="hide_show" placeholder="New Exam Name"/> 
    <button id="add_edu_deg" class="hide_show">Add</button> <p id="save_exam" class="hide_show p_hide_show"></p>

JQuery :

         $.ajax({
                    type:'post',
                    url:'exam_entry.php',
                    data: 'add_new_deg_field='+ $('#add_new_deg_field').val(),                           
                    success: function(reply_data){
                        $('#save_exam').html(reply_data);


                    }
                });

                return false;
        }

By this code I can save new item in my database table by clicking 'add_edu_deg' button. But can't refresh the select tag options. How can I do it using jquery. I search a lot but can't find any solution. Plz help. Thank you.

user3817516
  • 49
  • 1
  • 2
  • 10

3 Answers3

0

I am assuming that you want to remove the selected <option> once it has been selected since you haven't defined what you mean by refresh

If that is the case , within the success callback you can do:

 $('#exam_select option:selected').remove();

If this is not your intent, the question is not clear enough

charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

You can add an option to a select input with append.

<select><option>Option 1</option></select>
<button>Add option</button>

var x = 2;
$("button").click(function(){
    $("select").append("<option>Option "+x+"</option>");
    x++;
});

If you somehow save your option to x with ajax (I don't know how, never used ajax before), then execute append on your select, it will be added to the list without needing to be refreshed.

Marcel
  • 1,034
  • 1
  • 17
  • 35
0

Here is a fiddle of it.

http://jsfiddle.net/8ka5Y/

$('#addOption').on('click',addOption);
var i = 0;
function addOption(){ 
     $('#mooSelect')
         .append($("<option></option>")
         .attr("value",i++)
         .text("Option " + i)); 
}

which is pretty much what is in the question

What is the best way to add options to a select from an array with jQuery?

Community
  • 1
  • 1
HarryH
  • 1,058
  • 7
  • 12