2012-03-08 33 views
0

我想將選項添加到從數據庫中檢索的選擇標記中。 例如 如果用戶想要某個商店的位置。 首先數據庫將檢索「國家」並顯示在選擇標籤中。 現在,在選擇國家時,應根據所選國家/地區從數據庫檢索的選擇標籤中顯示下一個州。如何動態地將選項(選項以「java.sql.ResultSet」的形式)添加到jsp中的選擇標記

+1

這不能單獨使用JSP。你將不得不使用JavaScript和AJAX。 – 2012-03-08 10:22:53

+0

剛纔我讀了ajax和js.http://www.jguru.com/faq/view.jsp?EID = 1332116之間的區別可以給我發送任何ajax教程的鏈接,誰刷新html頁面的特定部分。 – 2012-03-08 10:31:20

回答

0

JSP在服務器端編譯。你試圖完成的是在客戶端發生的DOM操作。您不能根據使用JSP標籤選擇的國家動態生成州名。你必須使用JavaScript和Ajax來完成它。退房jQuery Autocomplete with remote datasource

我寧願發表一些代碼。

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> 

的Javascript

$('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的腳本。

+0

可以ü發佈一些示例鏈接? – 2012-03-08 10:48:00

0
<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> 

收件其接受從參數傳遞XMLHttpRequest並返回從servlet的響應的servlet。

相關問題