JQuery : Assign null to selected dropdown value

Question

I have two dropdowns. I want the second dropdown, Assign value to be set to null when the specific value which is student from the first dropdown is chosen.

First dropdown:

<select name="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

This is the second dropdown which is hidden, shown only when Reg with value admin is chosen.

<select name="Assign"> 
  <option value="">Choose</option> 

<?php
$sql=odbc_exec($conn,'SELECT AssignCd, AssignNm FROM AssignList');
if(odbc_fetch_row($sql))
  {
    $AssignCd= odbc_result($sql, "AssignCd");
    $AssignNm= odbc_result($sql, "AssignNm");
    echo "<option value='".$AssignCd."'>".$AssignNm."</option>";
  } 
?>

</select>  

I tried by doing the following but it doesn't work.

Please Help.

if($("#Reg").val("student");) {
  $("#AssignCd").val(""); 
  $("#AssignNm").val("");
}

UPDATED:

When Admin is selected, Assign with admin is chosen will be automatically selected. The problem is when I change my option to Student, the supposed value student is chosen is not shown.

How can I make the Assign value of both Admin and Student stay as it is and not jumbled up between them?

This is my code :

fiddle

$(document).ready(function() {
  $("#Reg").on("change", function() {
    if ($(this).find("option:selected").text() === 'Admin') {
       $("#Assign").show();
	   $('select[name="Assign"] option[name="student_assign"]').attr("disabled",true).prop("selected", false).wrap('<span>');
	   $('select[name="Assign"] option[name="admin_assign"]').prop('selected',true);
		}
		else if ($(this).find("option:selected").text() === 'Student') {
	    $("#Assign").show();
		$('select[name="Assign"] option[name="student_assign"]').prop('selected',true);  
		} else {
		$("#Assign").hide().attr("disabled"," ");
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<select name="Reg" id="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

<select name="Assign" id="Assign"> 
  <option value=" ">Choose</option> 
  <option name ="student_assign" value="student_assign">student is chosen</option>  
  <option name ="admin_assign" value="admin_assign">admin is chosen</option> 
</select>

Answer 1

• $('select[name="Reg"]').on('change', function() {}) this will trigger when you select an option in your select
• $(this).find("option:selected").val() == "student" this will see if you have select an option with value "student"
• $('select[name="Assign"] option[value="AssignCd"]').text(""); this sets the text of the option with value = AssignCd to empty

This is how far we can go without showing us your generated html for <select name="Assign">

$('select[name="Reg"]').on('change', function() {
  if ($(this).find("option:selected").val() == "student") {
    $('select[name="Assign"] option[value="AssignCd"]').text("");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

<select name="Assign"> 
  <option value="AssignCd">AssignNm</option>
  
</select>

Update

There is no need to use .wrap() as far as i can see, use .hide() / .show() look at the example below.

$(document).ready(function() {
  $("#Reg").on("change", function() {
    if ($(this).find("option:selected").text() === 'Admin') {
      $("#Assign").show();
      $('select[name="Assign"] option[name="student_assign"]').attr("disabled", true).prop("selected", false).hide();
      $('select[name="Assign"] option[name="admin_assign"]').prop('selected', true);
    } else if ($(this).find("option:selected").text() === 'Student') {
      $('select[name="Assign"] option[name="student_assign"]').attr("disabled", false).prop("selected", true).show()
      $('select[name="Assign"] option[name="student_assign"]').prop('selected', true);
    } else {
      $("#Assign").hide().attr("disabled", " ");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<select name="Reg" id="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

<select name="Assign" id="Assign"> 
  <option value=" ">Choose</option> 
  <option name ="student_assign" value="student_assign">student is chosen</option>  
  <option name ="admin_assign" value="admin_assign">admin is chosen</option> 
</select>

Answer 2

<select name="Reg" id="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

First of all #<selector> is used to select Dom elements which have an id <selector>. You cannot access them with the name attribute and id selector.

As for your issue. you need to use the on change event of the first drop down to decide the visibility of the second drop down.

<select name="Assign" id="Assign">
  <option value="">Choose</option>
  ....
  ....

$('#Assign').hide(); // first hide it so they cannot see it
$(document).on('change', '#Reg', function(e){
    if($(this).val()=='admin'){
        $('#Assign').show();
    }else{
        $('#Assign').val('').hide();
    }
})