dynamic creation of different controls based selection in select box values

<span>How do you pass values:</span></th>
   <td><select id="type" class="selectpicker" type="text" style="width:150px"  name="chkPassPort" required="" onSelect="select()">
   <option value="">select</option>
  <option value="Custom Values"  id="chkYes">Custom Values
</option>
  <option value=" Static Values"  id="chkNo"> Static Values</option>
  </select></td>
<div id="dvPassport" style="display: none">
    Custom Values:
    <input id="value" type="text" placeholder=" Enter Value " name="value" required="" />
</div>
<div id="dPassport" style="display: none">
    Static Values:
    <select id="value" class="selectpicker" type="text" style="width:150px" name="value" required="" align="left">
  <option value="">select</option>
  <option value="state">State</option>
  <option value="District">District</option>
  <option value="Gender">Gender</option>
  <option value="B-group">B-group</option>
  </select>
</div>
  </tr>

<script language="javascript" type="text/javascript">
function select()
{
if(document.form.chkPassPort.value=="Custom Values")
{
  $("#dvPassport").show() && $("#dPassport").hide();
}
else
{
 $("#dPassport").show() && $("#dvPassport").hide();
            }
}
</script>