繁体   English   中英

如何将选项(选项以“ java.sql.ResultSet”的形式)动态添加到jsp中的select标记

[英]how to dynamically add the options(options are in form of“java.sql.ResultSet”) to the select tag in jsp

我想将选项添加到从数据库中检索到的选择标签中。 例如,如果用户想要某个商店的位置。 首先,数据库将检索“国家”并显示在选择标记中。 现在,选择国家/地区后,下一个州/省/自治区/直辖市/自治区号应显示在select标记中,具体取决于所选国家/地区,该标记将从数据库中检索。

JSP在服务器端进行编译。 您要完成的是在客户端进行的DOM操作。 您不能基于使用JSP标记选择的国家动态生成州名称。 您必须使用javascript和Ajax来完成。 使用远程数据源签jQuery Autocomplete

我宁愿发布一些代码。

的HTML

    <select id="PIA" name="PIA"  tabindex="2" class='combobox' required='required' placeholder="Select Office">

                    <option value="!valid">Select Office</option>    
                    <option value='AHD'>AHEMDABAD</option>    
                    <option value='BPL'>BHOPAL</option>    
                    <option value='BHU'>BHUBNESWAR</option>    
                    <option value='COC'>COCHIN</option>    
                    <option value='DLH'>DELHI</option>    
                    <option value='GZB'>GHAZIABAD</option>    
                    <option value='GUW'>GUWAHATI</option>    
                    <option value='HYD'>HYDERABAD</option>    
                    <option value='JPR'>JAIPUR</option>    
                    <option value='JAL'>JALANDHAR</option>    
                    <option value='JMU'>JAMMU</option>
                    <option value='CAL'>KOLKATA</option>
                    <option value='KOZ'>KOZHIKODE</option>    
                    <option value='LKO'>LUCKNOW</option>   
                    <option value='BOM'>MUMBAI</option>    
                    <option value='PAT'>PATNA</option>    
                    <option value='SUR'>SURAT</option>    
                    <option value='ASR'>AMRITSAR</option>    
                    <option value='BLY'>BAREILLY</option>    
                    <option value='DDN'>DEHRADUN</option>    
                    <option value='MLP'>MALAPPURAM</option>
                    <option value='NGP'>NAGPUR</option>    
                    <option value='GOA'>PANAJI</option>    
                    <option value='PNE'>PUNE</option>    
                    <option value='RPR'>RAIPUR</option>    
                    <option value='RCH'>RANCHI</option>    
                    <option value='SML'>SHIMLA</option>    
                    <option value='SGR'>SRINAGAR</option>    
                    <option value='THN'>THANE</option>    
                    <option value='TVM'>TRIVANDRUM</option>    
                  </select>

    </td>



    <!--  District -->

    <td><div class="ui-widget" id='distPop'>

    <select id='district' name='district' tabindex="2" class='combobox'>  

        <option id="!valid" value='!valid'>Select District</option> 

    </select> 
</div>

Java脚本

$('document').ready(function(){
    $('#PIA').combobox({
    maxheight: '100px',
    selected: function(e,u){
            $.getJson({
                "yourURL",
                $(this).val();
                function(districts){
                   $.each(districts[$(this).val()], function(key, value){
               $('#district').append("<option value='"+key+"'>"+value+
                        "</option>");
                });

            });
      });
});

不要忘记在页面顶部包含jquery和jquery UI脚本。

<script type="text/javascript">

var xmlRequest;

function changeCities() { 

xmlRequest = new XMLHttpRequest(); 

xmlRequest.open("get", "CityServlet?stateId=2", true); 

xmlRequest.send(null); 

xmlRequest.onReadyStateChange = processResponse; 

} 

function processResponse() { 

alert(1); 

if(xmlRequest.readyState == 4 && xmlRequest.status == 200) { 

alert(xmlRequest.responseText); 

var response = xmlRequest.responseText; 

document.getElementById("res").value = response; 

} 

} 
</script> 

<body>

<form action="post" name="customerRegForm"> 

    <select name="state" onchange="changeCities()"> 

      <option value="1">Gujarat</option> 

      <option value="2">Rajasthan</option> 

   </select> 
  <select name="cities">  </select> 

  <input type="text" name="res"></input> 

</form> 

   </body> 

编写一个Servlet,该Servlet接受从XMLHttpRequest传递的参数,并从Servlet返回响应。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM