使用jQuery + JSON + Struts根據輸入文本字段填充選擇選項

我想實現一個ajax調用來根據輸入文本字段填充選擇下拉選項。任何幫助將不勝感激。使用jQuery + JSON + Struts根據輸入文本字段填充選擇選項

這是我的方法，它允許我們獲得一個數字模板。

System.out.println("Getting template for " + no_nego); 
//Do the database code or business logic here. 
try { 
    Connection con; 
    con = null; 

    Class.forName("com.mysql.jdbc.Driver").newInstance(); 
    con = DriverManager.getConnection("jdbc:mysql://localhost:8081/RSI_MANAGEMENT", "root", "user"); 

    Statement stmt = null; 

    stmt = con.createStatement(); 
    String tableName = "rsi_demande"; 
    String sql; 

    sql = "select filename from " + tableName + 
     " Where (filename IS NOT NULL and no_negociateur=" + getNo_nego() + ") "; 
    ResultSet res = null; 
    res = stmt.executeQuery(sql); 

    while (res.next()) { 

     listeTemplateDownload.add(res.getString(1)); 

    } 
    //setListeTemplateDownload(listeTemplateDownload); 
    stmt.close(); 

} catch (Exception ex1) { 
    ex1.printStackTrace(); 
} 


for (int i = 0; i < 2; i++) 
    System.out.println(listeTemplateDownload.get(i)); 

JSONArray json = new JSONArray(); 

json.addAll(getListeTemplateDownload()); 
json.toString(); 
System.out.printf("JSON: %s", json.toString()); 

return Action.SUCCESS; 


}

這裏是我的jsp頁面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <script src="js/jquery-1.11.1.min.js"></script>  
    </head>  
    <body> 
    <script> 
    $(function() { 
     $("#no_nego").change(
     function() { 
      var state = { 
       "no_nego": $("#no_nego").val() 
      }; 

      $.ajax({ 
      url: "readDistricts", 
      data: JSON.stringify(state), 
      dataType: 'JSON', 
      contentType: 'application/json', 
      type: 'POST', 
      async: true, 
      success: function() { 
       var $select = $('#listeTemplateDownload'); 
       $select.html(''); 
       console.log(listeTemplateDownload.size()); 
       for (var i = 0; i < getListeTemplateDownload().size(); i++) { 
       $select.append(
        '<option value= ' + listeTemplateDownload.get(i) + '</option>'); 
       } 
      } 
      }); 
     }); 
    }); 
    </script> 

    <h3>Struts 2 Dynamic Drop down List</h3> 
    State : 
    <input type="text" id="no_nego"></select> District : 
    <select id="listeTemplateDownload"></select> 
    </body> 

</html>

我想，當用戶完成設定數量，將動態生成的列表... 但我怎麼能填充這些選擇形式數據？

來源

2014-09-03 Aghiles Boumali

任何幫助將感激.. – 2014-09-04 09:24:09

已解決。問題是append方法： JSP：

<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html> 

<head> 
<script src="js/jquery-1.11.1.min.js"></script> 
<script> 

$(document).ready(function() { 
    $('#listeTemplateDownload').html(''); 
     $("#no_nego").change(
       function() { 

        var no_nego = { 
         "no_nego" : $("#no_nego").val() 

        }; 

        $.ajax({ 
          url : "readDistricts.action", 
         data : JSON.stringify(no_nego), 
         dataType : 'json', 
         contentType : 'application/json', 
         type : 'post', 
         async : true, 
         success : function(res) { 
          console.log(res.listeTemplateDownload.length); 
          for (var i = 0; i < res.listeTemplateDownload.length; i++) { 
           $('#listeTemplateDownload').append('<option value=' + res.listeTemplateDownload[i] + '>' + res.listeTemplateDownload[i] + '</option>'); 

          } 
         } 
        }); 

       }); 
    }); 
</script> 

</head> 

<body> 


    <h3>Struts 2 Dynamic Drop down List</h3> 
    Negociateur n°: 
    <input type="text" id="no_nego" > Template : 
    <select id="listeTemplateDownload"></select> 
</body> 

</html>

來源

2014-09-05 12:26:02

使用jQuery + JSON + Struts根據輸入文本字段填充選擇選項

回答

相關問題