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.
To populate select list with jQuery, use for loop along with append() and append the options to the already created select.
<select class="form-control"> <option selected="selected">orange</option> <option>white</option> <option>purple</option> </select> $(". js-example-tags"). select2({ tags: true });
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With