JSFiddle - React, Tailwind, and code Playground
HTML
<select name="options" id="options">
<option value="" selected="selected">Select your length of stay</option>
<option value="one">1 week</option>
<option value="two">2 weeks</option>
<option value="three">3 weeks</option>
</select>
<br />
<select name="rate" id="rate">
<option value="">Select your rate</option>
</select>
<br />
<div id="image"></div>
JavaScript
$(document).ready(function() {
var selectedOption = '',
options = {
one: {
rate: {
595: '<option value="595" name="25% deposit of 100 is due now, and final 495 will be due one week before arrival">25% deposit of 100 is due now, and final 495 will be due one week before arrival</option>',
795: '<option value="795">795</option>',
995: '<option value="995">995</option>',
}
},
two: {
rate: {
595: '<option value="595">1190</option>',
795: '<option value="795">1590</option>',
995: '<option value="995">1890</option>',
}
},
three: {
rate: {
595: '<option value="595" name="25% deposit of 300 is due now, and final 1485 will be due one week before arrival">25% deposit of 300 is due now, and final 1485 will be due one week before arrival</option>',
795: '<option value="795">795</option>',
995: '<option value="995">995</option>',
}
},
},
var resetSelect = function(elem, content) {
$(elem).html("<option value=''>" + content + "</option>");
};
$('#options').bind('change', function() {
var val = $(this).val();
if (!val) {
resetSelect('#rate', 'Select your length of stay first');
$('#image').hide();
return;
}
selectedOption = val;
var html = "<option value=''>Select weekly rate</option>";
$.each(options[val].rate, function(k, v) {
html += "<option value='" + k + "'>" + k + "</option>"
});
$('#rate').html(html).show();
});
$('#rate').bind('change', function() {
var val = $(this).val();
if (!val) {
$('#image').hide();
return;
}
...