【问题标题】:populate select box on selecting another selectbox在选择另一个选择框时填充选择框
【发布时间】:2013-03-18 06:18:00
【问题描述】:

我有两个选择框。它们都应该从数据库中填充。第二个选择框应该根据第一个选择框中的选定选项进行填充。数据库连接成功,我能够填充第一个选择框。但是我不知道如何根据第一个选择框填充第二个选择框。我用来填充第一个选择框的代码是,

        <select class="weekcombo">
        <%
        List list= new DataManager().getlist();
        for(int i = 0; i < list.size(); i++) {
        out.write("<option value=\""+ list.get(i)+ "\">"+ list.get(i));
        }
        %>

我不知道是否要为此使用 servlet 或其他东西。

【问题讨论】:

    标签: mysql jsp servlets


    【解决方案1】:

    对于第一个选择框,您可以默认填充值,就像您在上面的代码中提到的那样:

    <select class="weekcombo" onchange="populateSecValues(this)">
        <%
            List list= new DataManager().getlist();
            for(int i = 0; i < list.size(); i++) {
                out.write("<option value=\""+ list.get(i)+ "\">"+ list.get(i));
            }
        %>
    </select>
    
    <select id="secBox" class="weekcombo">
    </select>
    

    Javascript: 在 urlString 中,您可以传递第一个选择框值,就像我在下面的代码 sn-p 中传递的一样

    function populateSecValues(obj){
           // use here ajax call .. which will populate second box data 
         var firstBoxValue = obj.value;
         var urlString ="your_action_url?firstBoxValue="+firstBoxValue ;
         $.ajax({
             type: "POST",
             url: urlString  ,
             success: function(result) {
               console.info("result"+result);
               $("#secBox").html(result);
        }
    });
    }
    

    从服务器以

    的形式填充值
    <option value ="secBoxValue">secBoxValue</option>
    

    【讨论】:

    • 对于这个your_action_url,你也可以给jsp page url。就像populateSecBox.jsp?firstBoxValue= 如果你不想使用servlet。
    • 解决方案解决了您的问题吗?如果是,则将其标记为答案
    【解决方案2】:

    Sagar Dalvi 有一个很好的解决方案。根据第一个选择的项目填充第二个选择框的唯一方法是使用 Javascript。这是因为,除非您使用 Javascript,否则在页面加载时需要知道第二个选择框的内容 - 在用户做出任何选择之前。

    使用 Javascript,当用户在第一个选择框中使用 AJAX 调用时,页面能够动态地将选项加载到第二个选择框中。

    不使用 javascript 的唯一方法是让表单跨越一页以上,因此第二个选择框位于下一页。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-07-14
      • 1970-01-01
      • 2011-08-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-29
      相关资源
      最近更新 更多