JSFiddle - React, Tailwind, and code Playground
HTML
<p>
<select class="mobile-vendor">
<option value="motorola">Motorola</option>
<option value="nokia">Nokia</option>
<option value="android">Android</option>
</select>
<select class="model">
<option></option>
</select>
</p>
<p><a id="download-link" href="#" style="display: none;">Download it here</a></p>
CSS
#download-link {
padding: 13px 15px 13px 15px;
font-size: larger;
font-decoration: underline;
background-color: #ffffbb;
border: 2px dashed red;
margin-top: 16px;
display: inline-block;
}
JavaScript
$(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();
});
});