JSFiddle - React, Tailwind, and code Playground

by Conor

HTML

<script src="http://www.appelsiini.net/projects/chained/jquery.chained.js"></script>
<select name="category" class="category_id">
    <option value="">--</option>
    <option value="category-1">Percentage</option>
    <option value="category-2">Flat Rate</option>
</select>
<select name="locale" class="locale_id">
    <option value="">--</option>
    <option value="locale-1">USD</option>
    <option value="locale-2">INR</option>
    <option value="locale-3">GBP</option>
    <option value="locale-4">CAD</option>
    <option value="locale-5">AUD</option>
    <option value="locale-6">BRL</option>
</select>
<br/>
<select name="amount" class="amount_id">
    <option value="5" class="category-1\locale-1">5%</option>
    <option value="4" class="category-1\locale-1">4%</option>
    <option value="3" class="category-1\locale-1">3%</option>
    <option value="2" class="category-1\locale-1">2%</option>
    <option value="1" class="category-1\locale-1">1%</option>
    <option value="Other" class="category-1\locale-1">Other</option>
    <option value="5" class="category-1\locale-2">5%</option>
    <option value="4" class="category-1\locale-2">4%</option>
    <option value="3" class="category-1\locale-2">3%</option>
    <option value="2" class="category-1\locale-2">2%</option>
    <option value="1" class="category-1\locale-2">1%</option>
    <option value="Other" class="category-1\locale-2">Other</option>
    <option value="5" class="category-1\locale-3">5%</option>
    <option value="4" class="category-1\locale-3">4%</option>
    <option value="3" class="category-1\locale-3">3%</option>
    <option value="2" class="category-1\locale-3">2%</option>
    <option value="1" class="category-1\locale-3">1%</option>
    <option value="Other" class="category-1\locale-3">Other</option>
    <option value="5" class="category-1\locale-4">5%</option>
    <option value="4" class="category-1\locale-4">4%</option>
    <option value="3" class="category-1\locale-4">3%</option>
    <option...

JavaScript

$(document).ready(function () {
    $('.amtother').hide().attr("disabled", true);
});

$(document).ready(function () {
    $('.amount_id').chained('.category_id, .locale_id');
});

$(document).ready(function () {
    $('.amount_id').change(function () {
        if ($('.amount_id').val() == "Other") {
            $('.amtother').show().attr("disabled", false);
        } else {
            $('.amtother').hide().attr("disabled", true);
        }
    });
});