动态下拉Jsp

时间:2013-02-01 05:49:47

标签: javascript json jsp

我希望有一个下拉列表,当我更改第一个下拉列表时,该列表会发生变化。 我确定我的servlet是正确的,因为它返回我需要的值,但我的servlet不运行。当我调试它时,它没有命中servlet中的断点。

我认为这与我的javascript有关。

这是JSP文件:

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<SCRIPT type="text/javascript" src="dropDownOnderdelen.js"></script>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
 Select a file to upload: <br />
<form action="/Racing/UploadServlet" method="post"
                    enctype="multipart/form-data">
 <input type="file" name="file"  />
<br />
Logische Naam: <input type="text" name="logicalName"><br>
Stuknr(automatisch,nog niet geimplementeerd): <input type="text" name="partNr"><br>
Kost: <input type="text" name="cost"><br>


Assembly:
<select name = "assembly">
 <c:forEach var ="assembly" items="${Assemblys}">
 <option value="${assembly.id}">${assembly.name}</option>
 </c:forEach>
 </select>
 <select id="onderdeel">
 <option>Kies eerst een assembly</option>
 </select>
 <br>
  <textarea name="comments" cols="25" rows="5">
  Verdediging Design
  </textarea><br>
  <input type="submit" value="Upload File" />
 </form>
 </body>
 </html>

这是javascript文件

 $(document).ready(function() {
   $('#assembly').change(function() {
    var selectedValue = $(this).val();
    var servletUrl = 'OnderdelenServlet?value=' + selectedValue;

    $.getJSON(servletUrl, function(options) {
        var dropdown2 = $('#onderdeel');
        $('>option', dropdown2).remove(); // Clean old options first.
        if (options) {
            $.each(opts, function(key, value) {
                dropdown2.append($('<option/>').val(key).text(value));
            });
        } else {
            dropdown2.append($('<option/>').text("Please select dropdown1"));
        }
    });
  });
});

servlet没问题,我很确定,所以不需要把它放在这里。

2 个答案:

答案 0 :(得分:2)

您已使用

$('#assembly')。change ===&gt; #代表ID(元素ID)

在你的javascript中

在你的JSP文件中,你有&lt;选择&GT;如 &LT;选择name =“assembly”&gt;

所以也要给你分配“ID”&lt;选择&GT;框 &LT; select name =“assembly”id =“assembly”&gt;

答案 1 :(得分:0)

这是我在同一案件中所做的事情

纪律是我的第一个组合id;

$("#discipline").change(function() {
         var data = $("#discipline option:selected").text();

                $.ajax({
                      type: 'POST',
                      url: 'registerdcodes?type=discipline&discipline='+data,
                      success:function(data){  
                    fillComboBox(data,$("#codes"));//populating secondcombo
                      }
                    });

     });

还添加了fillcombomethod:

如果您需要“请选择您的选项”作为第一项通过isSelectRequired true

villlagesString是由|

分配的bigString

// Ex:villagesString应该喜欢这个.. villagesString =“option1 | option2 | option3 | option4”;

    function fillComboBox(villagesStrings,box,isSelctRequired){
        if(villagesStrings !=null){
            var villagesStrings = villagesStrings.split('|');
            if(isSelctRequired){
            box.append("<option value='null'>Please select your option</option>");
            }
            for (var i = 0, l = villagesStrings.length-1; i <l; i++){
                var id =villagesStrings[i].substring(0,2);
                var qtn =villagesStrings[i].substring(0,villagesStrings[i].length)
                box.append("<option value="+qtn+">"+qtn+"</option>");
        }
        }

        }