Use jQuery to edit the options within HTML select box elements. To use this snippet make sure that jQuery is included within the head of your HTML document. Paste the script into the document body or use it within a document ready function.

This snippet will remove every option within the targeted select box.

1
2
3
4
5
6

<script type="text/javascript">
  $('#YourSelectBoxID')
    .find('option')
    .remove()
    .end();
</script>

This snippet will remove all of the options within the targeted select box and then append a single custom option.

1
2
3
4
5
6
7

<script type="text/javascript">
  $('#YourSelectBoxID')
    .find('option')
    .remove()
    .end()
    .append('<option value="value">Any text you like.</option>');
</script>

This snippet will add options to the targeted select box.

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
  // Setup the options string, this variable will contain the HTML
  // you wish to inject into the select box element.
  var options = '';
 
  // Build the options one by one appending them to the HTML string
  options += '<option value="1">Option 1</option>';
  options += '<option value="2">Option 2</option>';
  options += '<option value="3">Option 3</option>';
 
  // Inject the HTML options variable into the select box
  $('#YourSelectBoxID').html(options);
</script>