Question

好的，这是Java / JavaScript专家的一个：

在我的应用程序中，其中一个控制器将TreeMap传递给它的JSP。此地图将汽车制造商的名称作为键，将汽车对象列表作为值。这些Car对象是简单的豆子，包含汽车的名称，id，生产年份等。所以，地图看起来像这样（这只是一个例子，稍微澄清一下）：

关键：保时捷
值：包含三个Car对象的列表（例如911，Carrera，Boxter及其可观的生产年份和ID）
关键：菲亚特
值：包含两个Car对象的列表（例如，Punto和Uno）
等...

现在，在我的JSP中，我有两个组合框。一个人应该收到汽车制造商的清单（地图上的钥匙 - 这部分我知道该怎么做），另一个应该动态地改变来显示当用户选择某个汽车的汽车名称时第一个组合框的制造商。因此，例如，用户在第一个组合框中选择“保时捷”，第二个立即显示“911，Carrera，Boxter”......

在花了几天试图找出如何做到这一点之后，我准备承认失败了。我尝试了很多不同的东西，但每次我都碰到了一堵墙。任何人都可以建议我应该如何处理这个问题？是的，我是一个JavaScript新手，如果有人想知道......

编辑：我将此作为代码挑战重新加入。感谢所有在不使用任何JavaScript框架（如JQuery）的情况下解决这个问题的人。

Answer 1

我只是喜欢挑战。

没有jQuery，只是普通的javascript，在Safari上测试过。

我想提前补充以下意见：

由于错误，它很快就结束了检查。
生成两个部分; 带有Map的第一个脚本节点和制造商的内容选择
适用于我的机器（TM）（Safari / OS X）
没有（css）造型应用。我的味道很糟糕反正没用。

<body>
  <script>
  // DYNAMIC
  // Generate in JSP
  // You can put the script tag in the body
  var modelsPerManufacturer = {
    'porsche' : [ 'boxter', '911', 'carrera' ],
    'fiat': [ 'punto', 'uno' ]  
  };
  </script>

  <script>
  // STATIC
  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" size="5">
      <!-- Options generated by the JSP -->
      <!-- value is index of the modelsPerManufacturer map -->
      <option value="porsche">Porsche</option>
      <option value="fiat">Fiat</option>
    </select>

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

</body>

Answer 2

嗯，无论如何，正如我所说的那样，我终于自己做到了，所以这是我的答案......

我从我的控制器接收这样的地图（我使用Spring，不知道它如何与其他框架一起工作）：

<c:set var="manufacturersAndModels" scope="page" value="${MANUFACTURERS_AND_MODELS_MAP}"/>

这些是我的组合：

<select id="manufacturersList" name="manufacturersList" onchange="populateModelsCombo(this.options[this.selectedIndex].index);" >
                  <c:forEach var="manufacturersItem" items="<%= manufacturers%>">
                    <option value='<c:out value="${manufacturersItem}" />'><c:out value="${manufacturersItem}" /></option>
                  </c:forEach>
                </select>

select id="modelsList" name="modelsList"
                  <c:forEach var="model" items="<%= models %>" >
                    <option value='<c:out value="${model}" />'><c:out value="${model}" /></option>
                  </c:forEach>
                </select>

我导入了以下类（当然，某些名称已被更改）：

<%@ page import="org.mycompany.Car,java.util.Map,java.util.TreeMap,java.util.List,java.util.ArrayList,java.util.Set,java.util.Iterator;" %>

这是完成所有艰苦工作的代码：

<script type="text/javascript">
<%  
     Map mansAndModels = new TreeMap();
     mansAndModels = (TreeMap) pageContext.getAttribute("manufacturersAndModels");
     Set manufacturers = mansAndModels.keySet(); //We'll use this one to populate the first combo
     Object[] manufacturersArray = manufacturers.toArray();

     List cars;
     List models = new ArrayList(); //We'll populate the second combo the first time the page is displayed with this list


 //initial second combo population
     cars = (List) mansAndModels.get(manufacturersArray[0]);

     for(Iterator iter = cars.iterator(); iter.hasNext();) {

       Car car = (Car) iter.next();
       models.add(car.getModel());
     }
%>


function populateModelsCombo(key) {
  var modelsArray = new Array();

  //Here goes the tricky part, we populate a two-dimensional javascript array with values from the map
<%                          
     for(int i = 0; i < manufacturersArray.length; i++) {

       cars = (List) mansAndModels.get(manufacturersArray[i]);
       Iterator carsIterator = cars.iterator();           
%>
    singleManufacturerModelsArray = new Array();
<%
    for(int j = 0; carsIterator.hasNext(); j++) {

      Car car = (Car) carsIterator.next();

 %>         
    singleManufacturerModelsArray[<%= j%>] = "<%= car.getModel()%>";
 <%
       }
 %>
  modelsArray[<%= i%>] = singleManufacturerModelsArray;
 <%
     }         
 %>   

  var modelsList = document.getElementById("modelsList");

  //Empty the second combo
  while(modelsList.hasChildNodes()) {
    modelsList.removeChild(modelsList.childNodes[0]);
  }

 //Populate the second combo with new values
  for (i = 0; i < modelsArray[key].length; i++) {

    modelsList.options[i] = new Option(modelsArray[key][i], modelsArray[key][i]);
  }      
}

Answer 3

您使用的是Struts吗？

你需要一些JavaScript技巧（或AJAX）来实现这一目标。

您需要做的是，在您的JavaScript代码中的某处（暂时不管您如何生成它）：

var map = {
   'porsche': [ 'boxter', '911', 'carrera' ],
   'fiat': ['punto', 'uno']
};

这基本上是服务器端数据结构的副本，即制造商键入的地图，每个值都有一系列汽车类型。

然后，在制造商的onchange事件中，您需要从上面定义的地图中获取数组，然后从中创建一个选项列表。（查看devguru.com - 它有很多关于标准JavaScript对象的有用信息）。

根据您的汽车列表有多大，最好采用AJAX路线。

你需要创建一个新的控制器，它查找给定制造商的汽车类型列表，然后转发到返回JSON的JSP（它不一定是JSON，但它对我来说效果很好。）

然后，使用jQuery等库来检索onchange事件中的汽车列表以获取制造商列表。（jQuery是一个很好的JavaScript框架，它可以让JavaScript更容易开发。文档非常好。）

我希望其中一些有意义吗？

Answer 4

这是jsp中一个工作，剪切和粘贴的答案，没有任何标记库或外部依赖项。带有模型的地图是硬编码的，但不应该造成任何问题。

我将此答案与之前的答案分开，因为添加的JSP不会提高可读性。在'现实生活'中，我不会用所有嵌入式逻辑加载我的JSP，而是将它放在某个类的某个类中。或者使用标签。

所有“第一”的东西都是为了防止生成的代码中的“超级”。使用foreach dos不会让你知道元素的数量，所以你检查最后。您也可以跳过第一个元素处理，然后通过将构建器长度减少1来去除最后一个“，”。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="java.util.Map"%>
<%@page import="java.util.TreeMap"%>
<%@page import="java.util.Arrays"%>
<%@page import="java.util.Collection"%>
<%@page import="java.util.List"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Challenge</title>
</head>
<body onload="setModels()">
<% // You would get your map some other way.
    Map<String,List<String>> map = new TreeMap<String,List<String>>();
    map.put("porsche", Arrays.asList(new String[]{"911", "Carrera"}));
    map.put("mercedes", Arrays.asList(new String[]{"foo", "bar"}));
%>

<%! // 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" size="5">
      <% boolean first = true;
         for (String mf : map.keySet()) { %>
          <option value="<%= mf %>" <%= first ? "SELECTED" : "" %>><%= mf %></option>
      <%   first = false;
         } %>
    </select>

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

</body>
</html>

Answer 5

使用原型怎么样？首先，您选择的类别框：

<SELECT onchange="changeCategory(this.options[this.selectedIndex].value); return false;">
   <OPTION value="#categoryID#">#category#</OPTION>
   ...

然后，输出N个不同的选择框，每个子类别对应一个：

<SELECT name="myFormVar" class="categorySelect">
...

您的changeCategory javascript函数会禁用类categorySelect的所有选择，然后只启用当前categoryID的选项。

// Hide all category select boxes except the new one
function changeCategory(categoryID) {

   $$("select.categorySelect").each(function (select) {
      select.hide();
      select.disable();
   });

   $(categoryID).show();
   $(categoryID).enable();
}

当您在原型中隐藏/禁用此类内容时，它不仅会将其隐藏在页面上，而且还会保留FORM变量。因此，即使您有N个选择具有相同的FORM变量名称（myFormVar），也只有活动的一个发布。

Answer 6

不久前，我想到了类似的事情。

使用jQuery和TexoTela插件并不是那么困难。

首先，您有一个类似上面提到的地图的数据结构：

var map = {
   'porsche': [ 'boxter', '911', 'carrera' ],
   'fiat': ['punto', 'uno']
};

您的HTML应该与以下内容相媲美：

<select size="4" id="manufacturers">
</select>
<select size="4" id="models">
</select>

然后，用jQuery代码填充第一个组合，如：

$(document).ready(
  function() {
    $("#bronsysteem").change( manufacturerSelected() );
  } );
);

其中manufacturerSelected是在onChange事件上注册的回调

function manufacturerSelected() {
  newSelection = $("#manufacturers").selectedValues();
  if (newSelection.length != 1) {
    alert("Expected a selection!");
    return; 
  }
  newSelection = newSelection[0];
  fillModels(newSelection);     
}

function fillModels(manufacterer) {
    var models = map[manufacturer];

    $("models").removeOption(/./); // Empty combo

    for(modelId in models) {
       model = models[modelId];
       $("models").addOption(model,model); // Value, Text
    }
}

这应该可以解决问题。

请注意，那里可能存在语法错误;我编辑了我的代码以反映您的用例并且不得不剥离很多。

如果这有帮助，我会很感激评论。

Answer 7

作为我之前帖子的附加内容;您可以在JSP中放置脚本标记，在迭代地图上。有关迭代地图的示例，请参阅Maps in Struts。

您希望实现的目标（如果您不关心表单提交）我认为是这样的：

<script>
  var map = {
  <logic:iterate id="entry" name="myForm" property="myMap">
     '<bean:write name=" user" property="key"/>' : [
     <logic:iterate id="model" name="entry" property="value">
       '<bean:write name=" model" property="name"/>' ,
     </logic:iterate>
     ] ,
 </logic:iterate>
  };
</script>

你还有一些你可能希望阻止的超级“，”但我认为这应该可以解决问题。

根据在另一个组合框中选择的内容，使用Map中的值动态填充组合框

7 个答案: