title: jQuery adding to JSP page
body: <p>I have a piece of jQuery code which I found on the internet and I want to integrate it to my jsp page, I use Spring form tags.</p>
  
  <p>Here is the jQuery code:</p>
  
  <pre><code>(function ($) {
      //тут превращаем select в input    
      var id = "test",
          $id = $('#' + id),
          choices = $id.find('option').map(function (n, e) {
              var $e = $(e);
              return {
                  id: $e.val(),
                  text: $e.text()
              };
          }),
          width = $id.width(),
          realClass = $id.get(0).className,
          realId = $id.get(0).id,
  
  
          $input = $('&lt;input&gt;',{width: width});
      $id.after($input);
      $id.hide();
      $id.find('option').remove();
      //превратили
  
      $input.select2({
          query: function (query) {
              var data = {}, i;
              data.results = [];
  
              // подтставим то что искали
  
              if (query.term !== "") {
                  data.results.push({
                      id: query.term,
                      text: query.term
                  });
              }
  
              // добавим остальное
  
              for (i = 0; i &lt; choices.length; i++) {
                  if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
              }
  
              query.callback(data);
          }
      }).on('change',function()
            {   
                var value=$input.val();
                $id.empty();
                $id.append($('&lt;option&gt;').val(value))
                $id.val(value);             
            }
           );
  })(jQuery);
  </code></pre>
  
  <p>CSS file for jQuery - I name it test.css and apply it to my jsp page:</p>
  
  <pre><code>#test {
      width: 300px;
  }
  </code></pre>
  
  <p>My jsp page </p>
  
  <pre><code> &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" &gt;
  &lt;title&gt;Страница выборки&lt;/title&gt;
  &lt;link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/&gt;
  &lt;link rel="stylesheet" href="resources/cssFiles/test.css"/&gt;
  &lt;script type="text/javascript" src="resources/jsFiles/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="resources/jsFiles/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./resources/jsFiles/selecter.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
   $(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 &lt; enabledDays.length; i++) {
                      if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() &gt; 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});   
               });         
  
  
       });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;spring:message code="label.input.button" var="labelbutton"/&gt;
  
  &lt;h3 align="center"&gt;&lt;spring:message code="label.input.topLabel"/&gt;&lt;/h3&gt;
  
  
  &lt;form:form  id="myform" cssClass="testClass" modelAttribute="fboAttribute" method="post" action="add" &gt;
  &lt;table align="center"&gt;  
  
  
  &lt;tr id="name"&gt;
  &lt;td&gt;&lt;form:label path="institution.nameOfInstitution"&gt;&lt;spring:message code="label.input.nameOfInstitution"/&gt;&lt;/form:label&gt;
  &lt;form:select id="test"  path="institution.nameOfInstitution"&gt; 
  &lt;form:option  value=""&gt;&lt;spring:message code="label.select.msg" /&gt;-&lt;/form:option&gt;
  &lt;form:options items="${listOfInstitutionsNames}"/&gt;
  &lt;/form:select&gt; 
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="submit" value="${labelbutton}"/&gt;&lt;/td&gt;
  
  &lt;/table&gt; 
  &lt;/form:form&gt;
  </code></pre>
  
  <p>I would like to integrate my jQuery scripts with my jsp and Spring form tags.</p>
  
  <p>I'm sorry I'm new in jQuery.</p>
  
  <p>Thank you</p>