如何通过jQuery或JSP(JSTL）或Spring Forms标记使输入字段和选择成为一体

How to make input field and select in one by jQuery or JSP(JSTL) or Spring Forms tag

本文关键字：字段 输入 选择 JSP jQuery 何通过 JSTL Forms Spring      更新时间：2023-09-26

我需要将输入字段和选择器合二为一。

我有：

<form:select> 
<form:options items="${data}">
<form:select/>

我还有：

<form:input>

因此，当用户试图从<form:select>中选择某个东西但没有找到时，他只会自己将其放在下面的标签<form:input>中。

如何使用Spring表单标签的JQuery或JSP-JSTL来实现它？这可能吗？

我的jsp:

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Страница выборки</title>
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
<script type="text/javascript">
 $(document).ready(function()
         {
         $("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseenter(function() {        
             $(this).css("background-color", "gainsboro");   
         });
         $("#parctdate, #chldAdmitDate, #chldSchlDate, #name, #type, #daySchdl, #workSchdl, #rotation, #numbch, #chUnder3, #chUpper3, #chGoSchool, #chAdmitted").mouseleave(function() {        
             $(this).css("background-color", "white");   
         });
         var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
         function nationalDays(date) {
                var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();            
                for (i = 0; i < enabledDays.length; i++) {
                    if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {           
                        return [true];
                    }
                }
                return [false];
            }
         $(function(){
               $.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
               $("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
                                                                         duration: "normal",
                                                                         numberOfMonths: [ 1, 2 ],
                                                                         constrainInput: true,
                                                                         beforeShowDay: nationalDays});   
             });         
         $('#myform').submit(function(e) {
                if ($('#myselect').val()) {
                    // select is used, get the value
                    $('#institution.nameOfInstitution').val($('#myselect').val());
                } else if ($('#myinput').val()) {
                    // select was NOT used and textbox was used. try to get the value from textbox
                    $('#institution.nameOfInstitution').val($('#myinput').val());
                }
            }); 
     });
</script>
</head>
<body>
<spring:message code="label.input.button" var="labelbutton"/>
<h3 align="center"><spring:message code="label.input.topLabel"/></h3>

<form:form  id="myform" modelAttribute="fboAttribute" method="post" action="add" >
<table align="center">  
<tr id="name">
<td><form:label path="institution.nameOfInstitution"><spring:message code="label.input.nameOfInstitution"/></form:label>
<form:input id="myinput" path="institution.nameOfInstitution"/>
<form:select  id="myselect" path="institution.nameOfInstitution"> 
<form:option  value=""><spring:message code="label.select.msg" />-</form:option>
<form:options items="${listOfInstitutionsNames}"/>
</form:select> 
</td> <td><b><font color="#FF0000"><form:errors path="institution.nameOfInstitution"/></font></b></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><input type="submit" value="${labelbutton}"/></td>
</table> 
</form:form>
</body>
</html>

我会使用隐藏的输入来保持实际值。收听表单上的提交事件（通过jQuery）：

// assuming select value will be 0 when not selected..
$('#form_id').submit(function(e) {
    if ($('#select_id').val()) {
        // select is used, get the value
        $('#input_hidden_id').val($('#select_id').val());
    } else if ($('#input_id').val()) {
        // select was NOT used and textbox was used. try to get the value from textbox
        $('#input_hidden_id').val($('#input_id').val());
    }
});

#input_hidden_id将具有您的服务器所需的名称属性。

相关文章：