来自数据库jsp的依赖动态下拉列表

i am trying to make a dropdown list with the second select depending on the first select, and all the information comes from a big database.

我正在尝试使用第二个选择创建一个下拉列表,具体取决于第一个选择,并且所有信息都来自一个大数据库。

These are the two tables and columns i need to use from each with 2 examples.

这些是我需要使用的两个表和列,包含2个示例。

Table Country: CODE , NAME

表国家:代码,名称

           RO     ROMANIA

           GB     GREAT BRITAIN

Table AREA: CODE, NAME, ISOCOUNTRYCODE

表区域:代码,名称,ISOCOUNTRYCODE

        RO213   Vrancea     RO

        RO345   Vaslui      RO

        GB365   London      GB

        GB453   Manchester  GB

And this is what i curently have in JSP:

这就是我在JSP中所拥有的:

<td>Ţara în care s-a efectuat prelevarea probei *:</td>
<td>
   <select name="sampcountry" onblur="return validate2(this);" title="Ţara în care a fost prelevata proba (ISO 3166-1-alpha-2).">
      <option value="" />
      <%ResultSet rs1=s t.executeQuery( "select code,name from country"); while(rs1.next()){ %>
         <option value="<%=rs1.getString(" code ")%>">
            <%=rs1.getString( "name")%>
         </option>
         <%}%>
   </select>
</td>
</tr>

<tr>
   <td>Zona de prelevare:</td>
   <td>
      <select name="samparea" style="width: 300px" title="Zona în care a fost prelevată proba  (Nomenclatorul Unităţilor Teritoriale pentru Statistică NUTS –  sistem de coduri valabil doar pentru ţările membre UE şi Elveţia).">
         <option value="" />
         <% ResultSet rs2=s t.executeQuery( "select code,name,isocountrycode from area"); while(rs2.next()){ %>
            <option value="<%=rs2.getString(" code ")%>">
               <%=rs2.getString( "name")%>
            </option>
            <%}%>
      </select>
   </td>
</tr>

What i need is, when i select the country in the first select box, the second select box will only show the Areas from that country. And the AREA.ISOCOUNTRYCODE column contains the COUNTRY.CODE column information like in the example stated above.

我需要的是,当我在第一个选择框中选择国家/地区时,第二个选择框将仅显示该国家/地区的区域。 AREA.ISOCOUNTRYCODE列包含COUNTRY.CODE列信息,如上述示例所示。

1 个解决方案

#1

Something like this will do the job

像这样的东西可以完成这项工作

$("select[name=sampcountry]").on("change", function(){
  $("select[name=samparea] option")
    .hide().removeAttr("selected")
    .parent().find("option[value^="+ $(this).val() +"]").show()
    .first().prop("selected",true);
});

This will first hide all options then reveals the one's whichs values start with the selected country code.

这将首先隐藏所有选项,然后显示哪个值以所选国家/地区代码开头。

FIDDLE

#1