通过 JSON 接收数据时从子下拉列表中清除旧选项答案

【问题标题】：Clean old options from child dropdown when receiving data by JSON通过 JSON 接收数据时从子下拉列表中清除旧选项
【发布时间】：2012-03-03 12:59:30
【问题描述】：

我通过父下拉列表（第一个下拉列表）中的 onchange 事件填充子下拉列表（第二个下拉列表）。之后，通过子下拉列表的 onchange 事件，我将自动填充三个文本框。但我的问题是第一个下拉菜单。第一个下拉列表的 ID 是 combo，第二个下拉列表的 ID 是 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{
}
%>

【问题讨论】：

标签： javascript jquery ajax json jsp

【解决方案1】：

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

$.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)
    );
});

要将字符串拆分为数组，请查看此处：How do I split a string, breaking at a particular character?

它们的用法如下：

$.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])
        );
    }
});

希望这有帮助吗？

【讨论】：

感谢 twilson，但如果我想从 combo1.jsp 返回多个值，即 1、2、3、4...等，那么我应该如何在 auto.jsp 中编辑 javascript这样在选择 A 后，我可以看到 1、2、3、4，同样，当我选择 B 时，5、6、7、8 会出现在第二个组合框的下拉列表中？还有我应该如何编辑 json 数组以便它可以在 combo1.jsp 中存储多个值？
我正在尝试解决我的上述问题，但无法解决请帮助我
我正在尝试在小提琴中做到这一点但没有发生，请参阅我的第一条评论，我已经提到过，我正在显示 1,2,3,4 但所有内容都在一行中而不是在下拉方式。我是这个领域的新手，请帮我转一下
啊，我明白你现在的意思了！添加回答链接
@twilson..您的答案不起作用请在您的终端中测试您的代码，只有在它起作用后我才会接受您的答案。在第一个组合框中的 onchange 事件之后，我无法填充第二个组合框，但之前它即将到来。