根据另一个下拉列表选择填充下拉列表

发布于 2024-12-24 01:04:35 字数 4207 浏览 1 评论 0原文

我在 JSP 页面中有两个下拉字段，并且与 oracle 10g 有 type4 连接。我希望基于一个下拉列表选择，我希望第二个下拉列表应该通过根据第一个下拉列表中的数据自动从数据库获取数据来填充，就像刷新该 JSP 页面或显示类似“请稍候”之类的警报。我怎样才能在JSP-Servlet中做到这一点？

<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>

但我在 vehtypeout1 中只得到一个值，其中数据库包含多个值。我该怎么做？

原文

I have two dropdown fields in a JSP page and I have type4 connection with oracle 10g. I want that based on one dropdown selection I want that second dropdown should get filled by fetching data from database based on data in first dropdown automatically just like refreshing that JSP page or showing an alert something like "please wait". How can I do it in JSP-Servlet?

<select name="dropdown1">
    <option value="<%out.println(name);%>"><%out.println(name);%></option>
</select>

My objective is: This below dropdown should get filled base don above selection:

<select name="dropdown2">
    <option value="<%out.println(rollno);%>"><%out.println(rollno);%></option>
</select>

I have found one solution :

<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>

But i am getting only one value in vehtypeout1 where databse contains multiple values. How can i do it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧夏天 2024-12-31 01:04:35

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

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

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

在 jquery get 函数中，您可以添加一个回调函数，以便在服务器发回响应后执行。

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

回复收藏 0 原文

夜清冷一曲。 2024-12-31 01:04:35

您需要像下面这样的 ajax 调用。的 html 字符串

让被调用的函数返回""

。 jQuery/Ajax 将是：

$("#ddl1").change(function() {
     $.ajax({
          url: "URLyouwanttoaddress",
          data: "myselection=" + $("#ddl1").val();
          type:"get",
          success: function(data) {
                     $("#ddl2").html(data);
          }
      });
});

You'll want an ajax call like below. Have your function that is called return a html-string of

"<option value='myVal'>myText</option>".

The jQuery/Ajax would be:

$("#ddl1").change(function() {
     $.ajax({
          url: "URLyouwanttoaddress",
          data: "myselection=" + $("#ddl1").val();
          type:"get",
          success: function(data) {
                     $("#ddl2").html(data);
          }
      });
});

回复收藏 0 原文

~没有更多了~