Fatal编程技术网
  • java/
  • Java 基于另一个下拉选择填充下拉列表

Java 基于另一个下拉选择填充下拉列表

java jquery ajax jsp servlets

Java 基于另一个下拉选择填充下拉列表,java,jquery,ajax,jsp,servlets,Java,Jquery,Ajax,Jsp,Servlets,我在JSP页面中有两个下拉字段，我与oracle 10g有type4连接。我希望基于一个下拉列表选择，我希望第二个下拉列表应该通过根据第一个下拉列表中的数据自动从数据库获取数据来填充，就像刷新JSP页面或显示类似“请稍候”的警报一样。如何在jspservlet中实现它 <select name="dropdown1"> <option value="<%out.println(name);%>"><%out.println(name);%>

我在JSP页面中有两个下拉字段，我与oracle 10g有type4连接。我希望基于一个下拉列表选择，我希望第二个下拉列表应该通过根据第一个下拉列表中的数据自动从数据库获取数据来填充，就像刷新JSP页面或显示类似“请稍候”的警报一样。如何在jspservlet中实现它

<select name="dropdown1">
    <option value="<%out.println(name);%>"><%out.println(name);%></option>
</select>
我的目标是：以下下拉列表应根据以上选择进行填充：

<select name="dropdown2">
    <option value="<%out.println(rollno);%>"><%out.println(rollno);%></option>
</select>
我找到了一个解决方案：

<body onload="setModels()">
<% // You would get your map some other way.
Map<String,List<String>> map = new TreeMap<String,List<String>>();
Connection con=null;
String vehtypeout="";

String vehtypeout1="";
try{
Class.forName("oracle.jdbc.driver.OracleDriver");


con=DriverManager.getConnection("");


      PreparedStatement ps=null;
ResultSet  rs=null;

ps=con.prepareStatement("select c1.name, c2.roll from combo1 c1 left join combo2 c2 on      c1.name=c2.name  order by name");

rs=ps.executeQuery();



while(rs.next()){

vehtypeout=rs.getString(1);

vehtypeout1=rs.getString(2);

map.put(vehtypeout, Arrays.asList((vehtypeout1)));// here i want to show multiple value of vehtypeout1 from database but only one value is coming from databse, how can i fetch multiple value?
map.put("mercedes", Arrays.asList(new String[]{"foo", "bar"}));

      }



rs.close();

ps.close();

con.close();
}

catch(Exception e){


out.println(e);

}
%>

<%! // You may wish to put this in a class
public String modelsToJavascriptList(Collection<String> items) {
StringBuilder builder = new StringBuilder();
builder.append('[');
boolean first = true;
for (String item : items) {
    if (!first) {
      builder.append(',');
    } else {
      first = false;
    }
    builder.append('\'').append(item).append('\'');
}
builder.append(']');
return builder.toString();
}

public String mfMapToString(Map<String,List<String>> mfmap) {
StringBuilder builder = new StringBuilder();
builder.append('{');
boolean first = true;
for (String mf : mfmap.keySet()) {
  if (!first) {
      builder.append(',');
  } else {
      first = false;
  }
  builder.append('\'').append(mf).append('\'');
  builder.append(" : ");
  builder.append( modelsToJavascriptList(mfmap.get(mf)) );
  }
  builder.append("};");
  return builder.toString();
  }
%>

<script>
var modelsPerManufacturer =<%= mfMapToString(map) %>
function setSelectOptionsForModels(modelArray) {
var selectBox = document.myForm.models;

for (i = selectBox.length - 1; i>= 0; i--) {
// Bottom-up for less flicker
selectBox.remove(i);
}

for (i = 0; i< modelArray.length; i++) {
 var text = modelArray[i];
  var opt = new Option(text,text, false, false);
  selectBox.add(opt);
  }
  }

  function setModels() {
  var index = document.myForm.manufacturer.selectedIndex;
  if (index == -1) {
  return;
  }

  var manufacturerOption = document.myForm.manufacturer.options[index];
  if (!manufacturerOption) {
  // Strange, the form does not have an option with given index.
  return;
  }
  manufacturer = manufacturerOption.value;

  var modelsForManufacturer = modelsPerManufacturer[manufacturer];
  if (!modelsForManufacturer) {
  // This modelsForManufacturer is not in the modelsPerManufacturer map
  return; // or alert
  }
  setSelectOptionsForModels(modelsForManufacturer);
}

function modelSelected() {
var index = document.myForm.models.selectedIndex;
if (index == -1) {
  return;
}
// alert("You selected " + document.myForm.models.options[index].value);
}
</script>
<form name="myForm">
<select onchange="setModels()" id="manufacturer">
  <% boolean first = true;
     for (String mf : map.keySet()) { %>
      <option value="<%= mf %>" <%= first ? "SELECTED" : "" %>><%= mf %></option>
  <%   first = false;
     } %>
</select>

<select onChange="modelSelected()" id="models">
  <!-- Filled dynamically by setModels -->
</select>


var模型精子制造商=
函数集SelectionsFormodels（modelArray）{
var selectBox=document.myForm.models；
对于（i=selectBox.length-1；i>=0；i--）{
//自下而上减少闪烁
选择框。删除（i）；
}
对于（i=0；i

但我在vehtypeout1中只得到一个值，其中数据库包含多个值。如何操作？

使用jquery，将函数绑定到“combobox1”选择框的onchange事件

在该函数中，向服务器中的jsp页面发送ajax请求（可以使用jquery get函数）

在该jsp页面中，从数据库检索相关数据，并将响应与这些数据一起发送回客户机（可能需要使用JSON格式）

在jQueryGet函数中，您可以添加一个回调函数，以便在服务器向您返回响应后执行

在该回调函数中，编写代码，使用服务器发送的响应数据填充“combobox2”。

您将需要下面这样的ajax调用。让调用的函数返回

“myText”

jQuery/Ajax将是：

$("#ddl1").change(function() {
     $.ajax({
          url: "URLyouwanttoaddress",
          data: "myselection=" + $("#ddl1").val();
          type:"get",
          success: function(data) {
                     $("#ddl2").html(data);
          }
      });
});
可能是重复的，谢谢，但我有这个问题：map.put（第一个组合框的值，Arrays.asList（新字符串[]{第二个组合框的值}））；在数据库中，第二个组合框有多个值，但我在第二个组合框字段中只得到一个值。我如何解决这个问题？但我在第一个组合框中得到了多个值，我希望在第二个组合框中得到多个值。我做了如下操作：while（rs.next（））{//获得输出值，然后：map.put（第一个组合框的值，Arrays.asList（新字符串[]{第二个组合框的值}））；}