通过JSON接收数据时，清除子下拉列表中的旧选项

Clean old options from child dropdown when receiving data by JSON

本文关键字：下拉列表 选项 清除 JSON 数据 通过      更新时间：2023-09-26

我通过父下拉列表（第一个下拉列表）中的onchange事件来填充子下拉列表（第二个下拉菜单）。之后，通过更改子下拉列表事件，我将自动填充三个文本框。但我的问题是第一个下拉列表。第一个下拉列表的Id为combo，第二个下拉列表为combo1。

当我从第一个下拉列表中选择A，然后在第二个下拉列表，通过在auto.jsp中添加下面写的javascript，我得到了一个值1。但当我在第一个下拉菜单中选择选项B，然后我在第二次下拉菜单中得到了2，但旧的值1应该从第二个菜单中删除，但它仍然保留在那里，为什么？类似地，当我从第一个下拉列表中多次选择A or B时，我想删除的第二个下拉列表中将出现多个值1或2，并显示一次，也就是说，如果选择A，则显示1，如果选择了B，则显示了2，如何做到这一点？

auto.jsp

   <script type="text/javascript">
  $(document).ready(function() {
 $("#combo").change(function() {// by onchange event in first dropdown I populate  second dropdown having id combo1
  $.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
   $("#combo1").append(
$("<option></option>").html(responseData.name).val(responseData.name)
);
  });
});
// After getting value in second dropdown, by onchange event i am autofilling 3 textboxes.
$("#combo1").change(function() {
 $.getJSON('combo2.jsp', { combo1Val : $(this).val() }, function(data) {
 $("#firsttextbox").val(data.name);
$("#secondtextbox").val(data.roll_no);
 $("#thirdtextbox").val(data.fine);
  });
 });
});          
    </script>
<body>
//First dropdown
 <select id="combo" name="firstcombobox">
     <option value="">select</option>
      <option value="a">A</option>
       <option value="b">B</option>
        </select> 
// Second dropdown
      <select id="combo1" name="combo1Val" >
     <option value="">select</option>
 </select> 
</body>

combo1.jsp

<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
String firstcombobox=request.getParameter("firstcombobox");
if(firstcombobox.equalsIgnoreCase("a")){// If selected value in first dropdown is A then 1 will be displayed as written below
JSONObject arrayObj= new JSONObject();
       arrayObj.put("name","1");// I displayed 1 in second dropdown option when A is selected
          response.setContentType("application/json");
      response.getWriter().write(arrayObj.toString());
      }
else if(firstcombobox.equalsIgnoreCase("b")){
  JSONObject arrayObj= new JSONObject();
       arrayObj.put("name","2");
          response.setContentType("application/json");
      response.getWriter().write(arrayObj.toString());
}
else{
}
%>

在auto.jsp'#comb'中更改匿名函数，替换为：

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    $("#combo1").append(
        $("<option></option>").html(responseData.name).val(responseData.name)
    );
});

带有：

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    $("#combo1").empty().append(
        $("<option></option>").html(responseData.name).val(responseData.name)
    );
});

要将字符串拆分为数组，请查看以下内容：如何拆分字符串，在特定字符处打断？

他们使用如下：

$.getJSON('combo1.jsp', {firstcombobox : this.value}, function(responseData) {
    var splitValues = responseData.name.split(/,/);
    $("#combo1").empty().append("<option value="0">Please select...</option>");
    for (var idx in splitValues) {
        $("#combo1").append(
            $("<option></option>").html(splitValues[idx]).val(splitValues[idx])
        );
    }
});

希望这有帮助？

相关文章：