Mint Mint -4 years ago 131
jQuery Question

JQuery : Assign null to selected dropdown value

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 Source
  • $('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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download