JSFiddle - React, Tailwind, and code Playground

by sando ahmad

HTML

<script src="https://code.jquery.com/jquery-1.4.3.min.js"></script>
<select name="one" id="one">
                <option value="0">Hotel</option>
                <option value="3000">Nirwana</option>
                <option value="6000">Laguna</option>
                <option value="9000">segoro</option>
                </select>
                <br />
                <select name="two" id="two">
                    <option>Room type</option>
                </select>
                <p>
                <input type="checkbox" name="tri" id="tri" value="50"/>
                <label >jalan</label>
                </p>

JavaScript

var data = {
    "0": ["chose room type"],
        "3000": ["economist_0", "executive_465", "business_984"],
        "6000": ["economist_200", "executive_500", "business_1000"],
        "9000": ["economist_600", "executive_850", "business_1500"],
}

$("#one").change(function () {
    var first = $(this),
        second = $("#two"),
        third = $("#tri"),
        key = first.val(),
        // instead of the original switch code
        vals = data[key] == undefined ? data.base : data[key],
        html = [];
    // create insert html before adding
    $.each(vals, function (i, val) {
        var v = val.split('_');
        html.push('<option value="' + v[1] + '">' + v[0] + '</option>')
    });
    // no need to empty the element before adding the new content
    second.html(html.join());
});

$("#one,#two,#tri").change(function () {
    var val1 = parseInt($('#one').val()) || 0,
        val2 = parseInt($('#two').val()) || 0,
        val3 = parseInt($('#tri').val()) || 0;
    $('#total').text(val1 + val2 + val3)
})