Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Populating select option dynamically with jquery

There will be two drop down lists,

First have the list of mobile vendor, and the second have the list of models per vendor.

When one select a vendor from the first drop down list, the second drop down list should populate with relevant model for that vendor dynamically. This is for mobile web site, it's better to use jquery-mobile

The option values for the second will in a json map.

  <select class="mobile-vendor">
    <option value="motorola">Motorola</option>
    <option value="nokia">Nokia</option>
    <option value="android">Android</option>
  </select>

 selectValues = {"nokia"   : {"N97":"download-link", 
                              "N93":"download-link"}, 
                 "motorola": {"M1":"download-link",
                              "M2":"download-link"}}

<select class="model">
    <option></option>
</select>

For example, if the user selects nokia in the first drop down list, the second drop down list should have N97, N93 as the options.

like image 392
Abimaran Kugathasan Avatar asked Nov 11 '11 06:11

Abimaran Kugathasan


People also ask

How to populate select option in jQuery?

To populate select list with jQuery, use for loop along with append() and append the options to the already created select.

How do I create a dynamic selection option?

<select class="form-control"> <option selected="selected">orange</option> <option>white</option> <option>purple</option> </select> $(". js-example-tags"). select2({ tags: true });

How do you populate state dropdown based on option selected in country dropdown?

Answer: Use the jQuery ajax() method Populating the state or city dropdown based on the value of option selected by the user in the country dropdown is a very common implementation of Ajax feature that you have seen on many websites while filling the registration form.


1 Answers

EDIT: New javascript to take into account your updated json structure:

$(function() {
    var selectValues = {
        "nokia": {
            "N97": "http://www.google.com",
            "N93": "http://www.stackoverflow.com"
        },
        "motorola": {
            "M1": "http://www.ebay.com",
            "M2": "http://www.twitter.com"
        }
    };

    var $vendor = $('select.mobile-vendor');
    var $model = $('select.model');
    $vendor.change(function() {
        $model.empty().append(function() {
            var output = '';
            $.each(selectValues[$vendor.val()], function(key, value) {
                output += '<option>' + key + '</option>';
            });
            return output;
        });
    }).change();

    // bonus: how to access the download link
    $model.change(function() {
        $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
    });
});

Working example is available in jsFiddle.

Note that this should work with jQuery mobile just fine.

like image 165
GregL Avatar answered Oct 11 '22 14:10

GregL