How to change options of with jQuery?

by

You can remove the existing options by using the empty method, and then add your new options:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

If you have your new options in an object you can:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Edit: For removing the all the options but the first, you can use the :gt selector, to get all the option elements with index greater than zero and remove them:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first

More Related Contents:

  1. Set select option ‘selected’, by value
  2. Hide options in a select list using jQuery
  3. Is it possible to style a select box? [closed]
  4. Set selected option of select box
  5. Fire event each time a DropDownList item is selected with jQuery
  6. How to check if an option is selected?
  7. How can I show and hide elements based on selected option with jQuery?
  8. How to expand ‘select’ option width after the user wants to select an option
  9. JQuery Hide Option doesn’t work in IE and Safari
  10. jQuery get selected option value (not the text, but the attribute ‘value’)
  11. jQuery – disable selected options
  12. Setting the selected attribute on a select list using jQuery
  13. How to break out of jQuery each loop?
  14. How can I recognize touch events using jQuery in Safari for iPad? Is it possible?
  15. IE9 jQuery AJAX with CORS returns “Access is denied”
  16. Google Chart draw Trendlines with date on x axis
  17. Animate background image change with jQuery
  18. jQuery counter to count up to a target number
  19. Convert a HTML table data into a JSON object in jQuery
  20. jQuery: Load Modal Dialog Contents via Ajax
  21. Changing .prop using jQuery does not trigger .change event
  22. jQuery If DIV Doesn’t Have Class “x”
  23. Leaflet – How to find existing markers, and delete markers?
  24. Jquery checking success of ajax post
  25. Placing error message for a checkbox array
  26. How does jQuery .data() work?
  27. jQuery select box validation
  28. How to use Twitter Bootstrap popovers for jQuery validation notifications?
  29. How to prevent jump on an anchor click?
  30. How to Handle Button Click Events in jQuery?

Leave a Comment