Question

I use jquery ajax to get data from the PHP file.

data = <option>Peter</option><option>Maria</option>

I want to then use jquery to put this data after the first option

<select>
   <option>Name</option>
</select>

I cant use html() on select because then the first option will be deleted. what jquery function can I use to put them after the first one?

EDIT: i cannot use append because then when i make another request and the data is:

data = <option>Michael</option><option>Erik</option>

Peter and Maria will still be in the Select list. how can I do? I have tried to have a

<div id=addhere></div>

after the first option and then use html() but it doesn’t work. Weird. how can I solve this?

Answer 1

Save the original options in a variable and append the AJAX response along with the original options.

Working demo:

http://jsbin.com/otiro (editable via http://jsbin.com/otiro/edit)

Source:

<select id="name">
  <option>Name</option>
</select>
<script type="text/javascript">
  var nameSelect = $('#name'), originalOptions = nameSelect.children();
  
  function handleAjaxResponse(response) {
    nameSelect.children().remove().end().append(originalOptions.add(response));
  }

  $.get("getNames.php", handleAjaxResponse);
</script>