Jquery从其他填充下拉列表

Question

我正在从另一个下拉值填充下拉列表。第一次一切都很好，但是当我再次更改第一个下拉列表时，以前的值仍然显示在第二个下拉列表中。以下代码我用来填充第二个下拉列表！

<select id="NextSession" name="NextSession">
<option value="1">Coffee</option>
<option value="2">Tea</option>
</select>

<select id="NextSectionId" name="NextSectionId">
<option><option>
</select>

$("#NextSession").blur(function() {
$("#NextSectionId").load("/GetData/" + $("#NextSession").val());
});

这是我的 php 代码：

$UniqueId=$_GET['UniqueId'];
$query2="select ClassName,SectionName,SectionId from class,section where class.ClassId=section.ClassId and class.ClassStatus='Active' and section.SectionStatus='Active' and class.Session='$UniqueId' order by ClassName";
$check2=mysql_query($query2);
while($row2=mysql_fetch_array($check2))
{
$SelectClassName=$row2['ClassName'];
$SelectSectionName=$row2['SectionName'];
$SelectSectionId=$row2['SectionId'];
echo "<option value=\"$SelectSectionId\">$SelectClassName $SelectSectionName</option>";
}

请告诉我是什么问题！！

这是一个活生生的例子！！

myraipur.com/test/test.php

在第一个下拉列表中选择任何选项，从第二个中选择...然后选择第一个，第二个下拉列表保持原样！！！

Answer 1

尝试将 bur 回调更改为 change 并在新请求清除所有旧值之前。

类似这样的：

$("#NextSession").change(function() {
  $("#NextSectionId").empty();
  $("#NextSectionId").load("/GetData/" + $("#NextSession").val());
});

一些外部链接： jQuery.load jQuery.empty

Answer 2

在加载内容之前尝试清除第二个选择

$("#NextSession").blur(function() {
  $("#NextSectionId").html(''); //emptying select field
  $("#NextSectionId").load("/GetData/" + $("#NextSession").val());
});