文章/答案/技术大牛

发布

社区首页 >问答首页 >基于在另一个组合框中选择的值动态填充一个组合框的值

问基于在另一个组合框中选择的值动态填充一个组合框的值
EN

Stack Overflow用户

提问于 2008-10-01 09:23:09

回答 7查看 18.7K关注 0票数 1

好的，以下是Java/JavaScript大师的一个：

在我的应用程序中，其中一个控制器将一个TreeMap传递给它的JSP。这张地图有汽车制造商的名字作为钥匙，汽车对象的列表作为值。这些汽车对象是简单的bean，包含汽车的名称、id、生产年份等。因此，地图看起来是这样的(这只是一个例子，以澄清一些事情)：

钥匙:保时捷

价值:包含三个汽车对象的列表(例如911、Carrera、Boxter及其值得尊敬的生产年限和ids)

钥匙:菲亚特

值:包含两个汽车对象的列表(例如，Uno和Uno)

等等。

现在，在我的JSP中，我有两个组合框。一个应该收到汽车制造商的列表(这部分我知道如何做)，另一个应该在用户从第一个组合框中选择某个制造商时，动态更改来显示汽车的名称。例如，用户在第一个组合框中选择一个"Porsche“，第二个立即显示"911、Carrera、Boxter”.

在花了几天时间想找出该怎么做之后，我准备承认失败。我尝试了很多不同的东西，但是每次我在路上碰壁的时候。有人能建议我怎么接近这个吗？是的，我是JavaScript新手，如果有人想知道.

编辑:我已经将此作为代码挑战进行了复述。任何不使用任何JavaScript框架(比如JQuery)就解决这个问题的人，都是值得称赞的。

java

javascript

combobox

maps

回答 7

Stack Overflow用户

回答已采纳

发布于 2008-10-09 13:38:21

不管怎么说，就像我说的，我终于自己做到了，所以我的答案是……

我从控制器收到这样的映射(我使用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]);
  }      
}

票数 2

Stack Overflow用户

发布于 2008-10-07 15:56:09

我只是喜欢挑战。

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

我想预先补充以下几点：

由于错误检查，它的故障时间很长。
生成两个部分:带有Map的第一个脚本节点和制造商选择的内容
在我的机器(TM)上工作(Safari/OS )
没有(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>

票数 3

Stack Overflow用户

发布于 2008-10-01 09:30:07

你在用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的开发更加容易。文档很好)。

我希望这些都有意义吗？

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/156852

复制

相似问题

问基于在另一个组合框中选择的值动态填充一个组合框的值
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于在另一个组合框中选择的值动态填充一个组合框的值EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于在另一个组合框中选择的值动态填充一个组合框的值
EN