【问题标题】:how to set selected index of select in html using jsp如何使用jsp在html中设置select的选定索引
【发布时间】:2013-12-16 07:37:08
【问题描述】:

我使用 select 标签在 html 中创建了一个组合框,并将列表绑定到 select。我需要使用 jsp 将选择选项动态设置为组合框。我的示例代码如下。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ page isELIgnored="false"%> 
<%@ page import="javax.servlet.*" %>
<%@ page import = "Precision.Biometric.PB400.App_Code.*"%>
<%@ page import = "Precision.Biometric.PB400.Presenter.*"%>
<%@ page import = "Precision.Biometric.PB400.Model.*"%>
<%@ page import = "org.joda.time.format.*" %>
<%@ page import = "org.joda.time.*" %>
<%@ page import = "java.text.*" %>
<%@ page import = "java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="Table/monthtable.css">
<link type="text/css" rel="stylesheet" href="Table/table.css">
<title>Shift Rotation Detail</title>
<link type="text/css" rel="stylesheet" href="js/dhtmlgoodies_calendar/dhtmlgoodies_calendar.css" media="screen" />

<script type="text/javascript" src="Jquery/jquery.js">
    </script>

<link type="text/css" rel="stylesheet" href="Jquery/jquery-ui-1.10.3/themes/base/jquery-ui.css" media="screen" />

<script type="text/javascript" src="Jquery/jquery-ui-1.10.3/jquery-1.9.1.js">
    </script>

<script type="text/javascript" src="Jquery/jquery-ui-1.10.3/ui/jquery-ui.js">
    </script>

<script type="text/javascript" src="js/dhtmlgoodies_calendar/dhtmlgoodies_calendar.js">
    </script>
<link type="text/css" rel="stylesheet" href="MultiDatesPicker/css/mdp.css" />
<link type="text/css" rel="stylesheet" href="MultiDatesPicker/css/pepper-ginder-custom.css"/>
<link type="text/css" rel="stylesheet" href="MultiDatesPicker/css/prettify.css"/>
<script type="text/javascript" src="MultiDatesPicker/jquery-ui.multidatespicker.js">
    </script>

<body>
<%! String selDay  ="" %>
<%
try
{
List<String> lstWeek = ArrayList<String> ();
lstWeek .add("Sunday");
lstWeek .add("Monday");
lstWeek .add("Tuesday");
lstWeek .add("Wednesday");
lstWeek .add("Thursday");
lstWeek .add("Friday");
lstWeek .add("Saturday");
pageContext.setAttribute("weekList",lstWeek);
if(request.getAttribute("selectedDay")!=null)
             {
                 selDay  = request.getAttribute("selectedDay").toString();
             }
}
catch(Exception e)
{
}
%>
<select name="cmbWeek" id="cmbWeek">
<c:forEach items="${weekList}" var="wkList">
        <option >${wkList}</option>
    </c:forEach>
</select><br>
</body>
</html>

如何使用 selDay 的值选择特定日期?

【问题讨论】:

  • 将select标签的值设置为你想要被选中的值。
  • 可以通过javascript(jquery)实现。

标签: java html jsp


【解决方案1】:
<option <c:if test="${selectedDay == wkList}">selected="selected"</c:if>>${wkList}</option>

【讨论】:

    【解决方案2】:
    <option <c:if test="${wkList == <%=selDay%>}">selected</c:if>>${wkList}</option>
    

    【讨论】:

      【解决方案3】:
      <html>
      <head>
      <title>Upload Form</title>
      <head>
      <link href="<?php echo base_url()?>/assets/validationEngine.jquery.css?1" rel="tex/css">
      <script type="text/javascript" src="<?php echo base_url()?>/assets/jquery-1.6.min.js"></script>
      <script type="text/javascript" src="<?php echo base_url()?>/assets/jquery.validationEngine.js?1"></script>
      <script type="text/javascript" src="<?php echo base_url()?>/assets/jquery.validationEngine-en.js?1"></script>
      
      
      <script type="text/javascript">
      $(document).ready(function(){
      
          $("#myForm").submit(function(){
              $("#myForm").validationEngine();
              var groupSubject = $.trim($("#groupSubject").val());
                  if(event.preventDefault) {
                      event.preventDefault();
                  } else {
                      event.returnValue = false;
                  }
              if(groupSubject == ""){
                  alert("Please enter Group Subject Name");
                  $("#groupSubject").focus();
                  return false; 
              }
              var practical = 0;
              var isChecked = $("#practical:checked" ).length;
              if (isChecked == 1)
                  practical = 1;
              else
                  practical = 0;
              var baseUrl = $("#base_url").val();
              var str = $("form").serialize();
              $.ajax({
                  url: baseUrl+'login/saveGroupSubject',
                  type:'post',
                  data: str,
                  success:function(data){
                          alert(data);
                          getSubjectList();
                          $("#groupSubject").focus();
                      } 
                  });
      
          });
          //getSubjectList();
          $(".showdata").change(function(){
              var batchId = $("#batch").val();
              var courseId = $("#course").val();
              if(batchId != "" && courseId !=""){
                  getSubjectList();
              }
          });
      
      }); // Ready Function
      
      function getSubjectList(){
          var batchId = $("#batch").val();
          var courseId = $("#course").val();
          var baseUrl = $("#base_url").val();
          if(event.preventDefault) 
          {
            event.preventDefault();
          }
          else
          {
             event.returnValue = false;
          }
          var str = "batchId="+batchId+"&courseId="+courseId
          $.ajax({
              url: baseUrl+'login/getGroupSubjectList',
              type:'post',
              data: str,
              success:function(data){
                      //alert(data);
                      $(".groupSubjectList").html(data);
                  } 
              });
      }
      
      function addOption(a, b, e) {
          var d = new Option(b, e);
          var c = a.length;
          a.options[c] = d
      }
      
      function deleteOption(a, c) {
          var b = a.length;
          if (b > 0) {
              a.options[c] = null
          }
      }
      
      function moveOptions(f, c) {
          var e = f.length;
          var g = new Array();
          var a = new Array();
          var b = 0;
          var d;
          for (d = e - 1; d >= 0; d--) {
              if (f.options[d].selected) {
                  g[b] = f.options[d].text;
                  a[b] = f.options[d].value;
                  deleteOption(f, d);
                  b++
              }
          }
          for (d = b - 1; d >= 0; d--) {
              addOption(c, g[d], a[d])
          }
          return false
      }
      
      function hasOptions(a) {
          if (a != null && a.options != null) {
              return true
          }
          return false
      }
      
      function swapOptions(f, e, c) {
          var h = f.options;
          var b = h[e].selected;
          var d = h[c].selected;
          var a = new Option(h[e].text, h[e].value, h[e].defaultSelected, h[e].selected);
          var g = new Option(h[c].text, h[c].value, h[c].defaultSelected, h[c].selected);
          h[e] = g;
          h[c] = a;
          h[e].selected = d;
          h[c].selected = b
      }
      
      function moveOptionUp(a) {
          if (!hasOptions(a)) {
              return false
          }
          for (i = 0; i < a.options.length; i++) {
              if (a.options[i].selected) {
                  if (i != 0 && !a.options[i - 1].selected) {
                      swapOptions(a, i, i - 1);
                      a.options[i - 1].selected = true
                  }
              }
          }
          return false
      }
      
      function moveOptionTop(b) {
          if (!hasOptions(b)) {
              return false
          }
          var a = getSelectedLength(b);
          if (a > 1) {
              alert("You can move a single element to top.");
              return false
          }
          for (i = 0; i < b.options.length; i++) {
              if (i > 0 && i <= b.options.length && b.options[i].selected) {
                  var c = i;
                  while (c > 0) {
                      swapOptions(b, c, --c)
                  }
              }
          }
          return false
      }
      
      function moveOptionDown(a) {
          if (!hasOptions(a)) {
              return false
          }
          for (i = a.options.length - 1; i >= 0; i--) {
              if (a.options[i].selected) {
                  if (i != (a.options.length - 1) && !a.options[i + 1].selected) {
                      swapOptions(a, i, i + 1);
                      a.options[i + 1].selected = true
                  }
              }
          }
          return false
      }
      
      function moveOptionBottom(b) {
          if (!hasOptions(b)) {
              return false
          }
          var a = getSelectedLength(b);
          if (a > 1) {
              alert("You can move a single element to bottom.");
              return false
          }
          for (i = 0; i < b.options.length; i++) {
              if (i >= 0 && i < b.options.length && b.options[i].selected) {
                  var c = i;
                  while (c < (b.options.length - 1)) {
                      swapOptions(b, c, ++c)
                  }
              }
          }
          return false
      }
      
      function getSelectedLength(b) {
          var a = 0;
          for (i = 0; i < b.options.length; i++) {
              if (b.options[i].selected) {
                  a++
              }
          }
          return a
      };
      </script>
      <style type="text/css">
      li{margin: 0;
      padding: 0;
      list-style: none;
      }
      </style>
      </head>
      <body>
              <table><form name="myForm" id="myForm" method="POST">
      
                  <tr><td>Course</td><td>
                      <select style="width:250px;" name="children[]" multiple="multiple" size="5" class="showdata validate[required]" id="children">
                      <?php
                          for($m =0; $m<count($course); $m++){?>
                          <option value="<?php echo $course[$m]['c_id'];?>"><?php echo $course[$m]['c_name'];?></option>
                          <?php }?>
                      </select>
                  </td>
                  <td><ul>
                          <li title="Move to Top" class="ui-state-default ui-corner-all" onclick="return moveOptionTop(document.getElementById('children'));"><span class="ui-icon ui-icon-arrowthickstop-1-n">Move Top</span></li>
                          <li>&nbsp;</li>
                          <li title="Move Up" class="ui-state-default ui-corner-all" onclick="return moveOptionUp(document.getElementById('children'));"><span class="ui-icon ui-icon-carat-1-n">Top</span></li>
                          <li>&nbsp;</li>
                          <li>&nbsp;</li>
                          <li title="Move Down" class="ui-state-default ui-corner-all" onclick="return moveOptionDown(document.getElementById('children'));"><span class="ui-icon ui-icon-carat-1-s">Bottom</span></li>
                          <li>&nbsp;</li>       
                          <li title="Move to Bottom" class="ui-state-default ui-corner-all" onclick="return moveOptionBottom(document.getElementById('children'));"><span class="ui-icon ui-icon-arrowthickstop-1-s">Move Bottom</span></li>
                        </ul></td>
                  </tr>
                  </form>
              </table>
              <div class="groupSubjectList"></div>
      </body>
      </html>
      

      【讨论】:

      • 请为您的代码提供一些信息和解释
      猜你喜欢
      • 2011-08-11
      • 1970-01-01
      • 2012-01-10
      • 1970-01-01
      • 2011-01-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多