February 04 2015

Jquery simple dynamic dropdown options with PHP array

Tagged Under : ,

jquery
Dynamic dropdown options always use in our Application. It can be based on user first selection to return a new listing to second dropdown options by AJAX.

Below is the example PHP array script:
$option = array();
$option[] = array('name' => 'fruits', 'value' => 'f');
$option[] = array('name' => 'vegetables', 'value' => 'v');
$option[] = array('name' => 'pizza', 'value' => 'p');

And now we need the Jquery script to build the dropdown select. Below script are allow to reuse again when you need to replace the dropdown option again.
(function($, window) {
  $.fn.populateOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.name);
      self.append($option);
    });
  };
})(jQuery, window);

How to use it.
<select id="dropdown" name="dropdown"></select>
<script>
var options = <?php echo json_encode($option); ?>
$("#dropdown").replaceOptions(options);
</script>

Below is the completed DEMO to show how it work:
Jquery simple dynamic dropdown options with PHP array

Make a Comment

You must be logged in to post a comment.