jquery爲下拉框賦值

<%@ page language="java"  pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>CNKI檢索頁面</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">

<!--去除連接<a href>下面的橫線-->

 <style type="text/css">
  <!--
  a:link {
   text-decoration: none;
  }
  
  a:visited {
   text-decoration: none;
  }
  
  a:hover {
   text-decoration: none;
  }
  
  a:active {
   text-decoration: none;
  }
  -->
  .menu{
  color: black;
  }
 </style>


<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
  </head>
 
  <body>
   <form action="#" method="post">
    <input type="hidden" name="dataBaseCode" id="dataBaseCode"/>
    <table align="center" style="margin-top: 50px;">
     <tr>
      <td>
       <img src="<%=basePath%>/images/logo.gif">
      </td>
      <td>&nbsp;&nbsp;</td>
      <td>
       <a href="#this" class="menu" οnclick="getSearchTypeList('1')">文獻</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('2')">期刊</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('3')">博碩文</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('4')">會議</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('5')">報紙</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('6')">年鑑</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('7')">百科</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('8')">詞典</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('9')">統計年鑑</a>
       <a href="#this" class="menu" οnclick="getSearchTypeList('10')">外文期刊</a>
      </td>
     </tr>
     <tr>
      <td>
       <select id="searchType" name="searchType" style="width: 180px;">
        <option value="全文">全文</option>
        <option value="主題">主題</option>
        <option value="篇名">篇名</option>
        <option value="作者">作者</option>
        <option value="單位">單位</option>
        <option value="關鍵詞">關鍵詞</option>
        <option value="摘要">摘要</option>
        <option value="參考文獻">參考文獻</option>
        <option value="中圖分類號">中圖分類號</option>
       </select>
      </td>
      <td colspan="2">
       <input type="text" name="keyWords" size="80"/>
       <input type="button" value="查詢" />
      </td>
     </tr>
    </table>
   </form>
   
    <script type="text/javascript">
     function changeStyle(){
      $(".menu").css("background-color","white");
      $(document).ready(function(){
         $("a").click(function(){
          $(this).css("background-color","blue");
         });
        });
     }
     function getSearchTypeList(code){
      changeStyle();
      $("#dataBaseCode").val(code);
      var dataArr = null;
      dataArr = [{name:"全文",value:"全文"},{name:"主題",value:"主題"},{name:"作者",value:"作者"},{name:"單位",value:"單位"},
               {name:"關鍵詞",value:"關鍵詞"},{name:"摘要",value:"摘要"},{name:"參考文獻",value:"中圖分類號"}];
      var searchType = $("#searchType");
      searchType.css("display","block");
      searchType.empty();
      if(dataArr!=null){
       for(var i=0;i<dataArr.length;i++){
        var option = $("<option>").text(dataArr[i].name).val(dataArr[i].value);
        searchType.append(option);
       }
      }
     }
    </script>
  </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章