Question

我有一个写书评的页面。在该页面上，我有一个动态下拉列表，其中书籍的标题和作者的值来自数据库。我需要确保如果用户选择Java作为书名，作者应该被选为Kathy sierra。如何确保？

代码如下：

这是在bookreview.jsp

  <select name="jumpMenu_group" size="1" id="jumpMenu_group">
        <option value=""></option>

        <% for(int i=0; i<beanList.size(); i++)
    {
        %>
        <option value="<%=beanList.get(i).getTitle() 
               %>"><%=beanList.get(i).getTitle() %></option>
        <%} %>
</select>

 <select name="jumpMenu_group2" size="1" id="jumpMenu_group">
         <option value=""></option>
        <% for(int i=0; i<beanList.size(); i++)
    {
        %>
        <option value="<%=beanList.get(i).getAuthor()
            %>"><%=beanList.get(i).getAuthor() %></option>
        <%} %>


        </select>

Answer 1

您需要使用JavaScript来获取所选值，并在第二个下拉列表中设置适当的值。您还有重复的ID（在select元素上） - ID必须是唯一的

给你的第二个下拉列表一个不同的ID（对于这个例子，我只是使用jumpMenu_group2）

document.getElementById("jumpMenu_group").onchange = function() {
    var selected = this.value; //currently selected value;
    var author = document.getElementById("jumpMenu_group2"); //second select element;

    //Do value comparison here
    if (selected == "Java")
        author.value = "Kathy Sierra"; //these values must exist in the dropdown, if they dont, add them dynamically
}

Answer 2

所以将你的jsp代码改为下一个

 <select name="jumpMenu_group" size="1" id="jumpMenu_group">
    <option value=""></option>

    <% for(int i=0; i<beanList.size(); i++)
{
    %>
    <option data-author="<%=beanList.get(i).getAuthor()" value="<%=beanList.get(i).getTitle() 
           %>"><%=beanList.get(i).getTitle() %></option>
    <%} %>
   </select>

   <select name="jumpMenu_group2" size="1" id="jumpMenu_group2">
     <option value=""></option>
    <% for(int i=0; i<beanList.size(); i++)
{
    %>
    <option value="<%=beanList.get(i).getAuthor()
        %>"><%=beanList.get(i).getAuthor() %></option>
    <%} %>


    </select>

我在选项（数据作者）中使用data-attribute来了解第一次选择的作者和标题

将javascript添加到您的页面（我的代码依赖于jQuery库）

$("#jumpMenu_group").on("change", function(){
 var val = $(this).attr("data-author");
 // now we know author
 $("#jumpMenu_group2").val(val);
});

我也建议你：

不要为两个元素使用一个id，因为ID表示元素的uniqal名称
read this about id and class

如何根据第一个下拉列表中选择的值在第二个下拉列表中选择一个值？这两个值都来自数据库

2 个答案: