JSFiddle - React, Tailwind, and code Playground

by Akram kamal

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

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

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