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>

Change name="Reg" to id="Reg" or just add it, Or you can change $("#Reg") to $('select[name="Reg"]') — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 21, 2017 at 6:47
They are the PHP variable that needed to be pass to the DB @guradio I need the values to be set to null. — Iman Yasmin
– Iman Yasmin, Commented Mar 21, 2017 at 6:59

Carsten Løvbo Andersen · Accepted Answer · 2017-03-23 08:01:37Z

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>

edited Mar 23, 2017 at 8:01

answered Mar 21, 2017 at 7:04

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iman Yasmin Over a year ago

Thank you. I managed to find the solution based on your answer. If you don't mind, could you see my updated question? I encountered some problems. @CarstenLøvboAndersen

Iman Yasmin Over a year ago

I get it. Thank you. They work perfectly now :) @CarstenLøvboAndersen

Bhadra · Accepted Answer · 2017-03-21 07:02:06Z

0

<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();
    }
})

answered Mar 21, 2017 at 7:02

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

1 Comment

Iman Yasmin Over a year ago

Thank you. Based on your answer I managed to find my own solution. If you don't mind could you help me with my updated question? @Bhadra

Collectives™ on Stack Overflow

JQuery : Assign null to selected dropdown value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related