JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<p>Chose Your Browser:
    <select name="Browser" required>
        <option value="">-- Select an Option --</option>
        <option value="1">IE</option>
        <option value="2">FF</option>
        <option value="3">Safari</option>
        <option value="4">Opera</option>
        <option value="5">Other</option>
    </select>
</p>
<div id="browserother">
    <p>Please Specify:
        <label id="browserlabel">
            <input name="Other Browser" type="text" placeholder="Other Browser" size="50" />
        </label>
    </p>
</div>
<p>Operating System:
    <select name="OS" required>
        <option value="">-- Select an Option --</option>
        <option value="Win">Windows</option>
        <option value="ios">iOS</option>
        <option value="otheros">Other</option>
    </select>
</p>
<div id="osother">
    <p>Please Specify:
        <label id="oslabel">
            <input name="Other OS" type="text" placeholder="Other OS" size="50" />
        </label>
    </p>
</div>

CSS

#browserother {
    display:none;
}
#osother {
    display:none;
}

JavaScript

$('select[name=Browser]').change(function () {
    if ($(this).val() == '5') {
        $('#browserother').show();
    } else {
        $('#browserother').hide();
    }
});

$('select[name=OS]').change(function () {
    if ($(this).val() == 'otheros') {
        $('#osother').show();
    } else {
        $('#osother').hide();
    }
});