JSFiddle - React, Tailwind, and code Playground
HTML
<select name="how" id="how" class="form-control c-select">
<option value="0">Select Option</option>
<option value="1">ICEF Brochure</option>
<option value="2">ICEF Email</option>
<option value="3">ICEF Sales Person</option>
<option value="4">ICEF Print ad</option>
<option value="5">Search Engine</option>
<option value="6">External Website</option>
<option value="7">Conference or Exhibition</option>
<option value="8">Recommendation</option>
<option value="9">Other</option>
</select>
<select name="SearchEngine" id="SearchEngine">
<option value="0">Select Option</option>
<option value="1">Google</option>
<option value="2">MSN</option>
<option value="3">Yahoo</option>
<option value="4">Other</option>
</select>
<select name="SalesPerson" id="SalesPerson">
<option value="0">Select Option</option>
<option value="1">Harald Kreiner</option>
<option value="2">Someone Else</option>
<option value="3">Unkown</option>
</select>
<input type="text" id="how_details" name="how_details" />
JavaScript
$( document ).ready(function() {
console.log( "ready!" );
//hide on init
var $SearchEngine = $("#SearchEngine");
var $SalesPerson = $("#SalesPerson");
var $how_details = $("#how_details");
$SearchEngine.hide();
$SalesPerson.hide();
$how_details.hide();
$("#how").change(function (e) {
var howValue = $(this).val();
if (howValue == '1' || howValue == '2') {
$how_details.hide();
$how_details.val('');
} else {
$how_details.show();
}
if (howValue == '5') {
$SearchEngine.show();
$how_details.hide();
$how_details.val('');
if ($SearchEngine.val() == 4) {
$how_details.val('');
$how_details.show();
}
} else {
$SearchEngine.hide();
}
if (howValue == '3') {
$SalesPerson.show();
$how_details.hide();
$how_details.val('');
} else {
$SalesPerson.hide();
}
if (howValue == '0') {
$how_details.hide();
$how_details.val('');
$SearchEngine.val('0');
$SalesPerson.val('0');
}
});
$SearchEngine.change(function (e) {
var searchValue = $(this).val();
if (searchValue == '4') {
$how_details.show();
} else {
$how_details.hide();
$how_details.val('');
}
});
});