2012-01-04 2 views
1

У меня есть два раскрывающихся поля на странице JSP, и у меня есть соединение type4 с oracle 10g. Я хочу, чтобы это было основано на одном выпадающем списке. Я хочу, чтобы второй раскрывающийся список заполнялся путем извлечения данных из базы данных на основе данных в первом раскрывающемся списке автоматически так же, как обновление страницы JSP или отображение предупреждения, напоминающего «please wait». Как я могу сделать это в JSP-Servlet?Population dropdown на основе другого выпадающего списка

<select name="dropdown1"> 
    <option value="<%out.println(name);%>"><%out.println(name);%></option> 
</select> 

Моя цель: Это ниже выпадающего списка должен заполняться основание Дон выше выбора:

<select name="dropdown2"> 
    <option value="<%out.println(rollno);%>"><%out.println(rollno);%></option> 
</select> 

Я нашел одно решение:

<body onload="setModels()"> 
<% // You would get your map some other way. 
Map<String,List<String>> map = new TreeMap<String,List<String>>(); 
Connection con=null; 
String vehtypeout=""; 

String vehtypeout1=""; 
try{ 
Class.forName("oracle.jdbc.driver.OracleDriver"); 


con=DriverManager.getConnection(""); 


     PreparedStatement ps=null; 
ResultSet rs=null; 

ps=con.prepareStatement("select c1.name, c2.roll from combo1 c1 left join combo2 c2 on  c1.name=c2.name order by name"); 

rs=ps.executeQuery(); 



while(rs.next()){ 

vehtypeout=rs.getString(1); 

vehtypeout1=rs.getString(2); 

map.put(vehtypeout, Arrays.asList((vehtypeout1)));// here i want to show multiple value of vehtypeout1 from database but only one value is coming from databse, how can i fetch multiple value? 
map.put("mercedes", Arrays.asList(new String[]{"foo", "bar"})); 

     } 



rs.close(); 

ps.close(); 

con.close(); 
} 

catch(Exception e){ 


out.println(e); 

} 
%> 

<%! // You may wish to put this in a class 
public String modelsToJavascriptList(Collection<String> items) { 
StringBuilder builder = new StringBuilder(); 
builder.append('['); 
boolean first = true; 
for (String item : items) { 
    if (!first) { 
     builder.append(','); 
    } else { 
     first = false; 
    } 
    builder.append('\'').append(item).append('\''); 
} 
builder.append(']'); 
return builder.toString(); 
} 

public String mfMapToString(Map<String,List<String>> mfmap) { 
StringBuilder builder = new StringBuilder(); 
builder.append('{'); 
boolean first = true; 
for (String mf : mfmap.keySet()) { 
    if (!first) { 
     builder.append(','); 
    } else { 
     first = false; 
    } 
    builder.append('\'').append(mf).append('\''); 
    builder.append(" : "); 
    builder.append(modelsToJavascriptList(mfmap.get(mf))); 
    } 
    builder.append("};"); 
    return builder.toString(); 
    } 
%> 

<script> 
var modelsPerManufacturer =<%= mfMapToString(map) %> 
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"> 
    <% boolean first = true; 
    for (String mf : map.keySet()) { %> 
     <option value="<%= mf %>" <%= first ? "SELECTED" : "" %>><%= mf %></option> 
    <% first = false; 
    } %> 
</select> 

<select onChange="modelSelected()" id="models"> 
    <!-- Filled dynamically by setModels --> 
</select> 


Но я я получаю только одно значение в vehtypeout1 где databse содержит несколько значений. Как мне это сделать?

+0

спасибо ... любое решение приятель? – Tom

+0

Возможный дубликат [Заполнение дочерних dropdownlists для детей в JSP/Servlet] (http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet) – BalusC

+0

ya спасибо, но у меня есть эта проблема: map.put (значение первого combobox, Arrays.asList (новая строка [] {значение второго поля со списком})); В базе данных есть несколько значений второго комбинированного поля, но я получаю только одно значение во втором поле комбо. Как я могу это решить? Но я получаю несколько значений в первом поле комбо и, как будто, я хочу несколько значений во втором поле со списком. Я сделал так: while (rs.next()) {// получил выходное значение then: map.put (значение первого combobox, Arrays.asList (новый String [] {значение второго поля со списком});} – Tom

ответ

0

Использование jquery, привязать функцию к событию onchange в поле «combobox1».

В этой функции отправьте запрос ajax (вы можете использовать функцию jquery get) на страницу jsp на вашем сервере.

На этой странице jsp извлекают соответствующие данные из базы данных и отправляют ответ клиенту с этими данными (возможно, вам необходимо использовать формат JSON).

В функции jquery get вы можете добавить функцию обратного вызова для выполнения после того, как сервер отправит вам ответ.

Внутри этой функции обратного вызова напишите код, чтобы заполнить «combobox2», используя данные ответа, отправленные сервером.

+0

.... спасибо, но можете ли вы, пожалуйста, написать этот код здесь. Я новый, нет этих полей. – Tom

0

Вам понадобится вызов ajax, как показано ниже. Имейте свою функцию, которая называется return html-string

"<option value='myVal'>myText</option>".

JQuery/Ajax будет:

$("#ddl1").change(function() { 
    $.ajax({ 
      url: "URLyouwanttoaddress", 
      data: "myselection=" + $("#ddl1").val(); 
      type:"get", 
      success: function(data) { 
        $("#ddl2").html(data); 
      } 
     }); 
}); 
Смежные вопросы