下拉框支持搜索

来源：互联网发布：openwrt多台设备mac 编辑：程序博客网时间：2024/05/05 13:29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>jQuery Chosen Plugin Example</title>
<meta name="description" content="Harvest recently released Chosen, a SELECT enhancer which offers autosuggest, search, stylability, and an elegant solution for multiple selection. Better yet, Chosen is available for both jQuery and Prototype." />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif" />
<style type="text/css">

/* all media */
@media all
{
  /* global */
  *        { margin:0; padding:0; } html { overflow-y:scroll; }
  body      { font-family:'lucida grande',tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222; }

  /* layout */
  .center   { width:1000px; margin:0 auto; }
   #page   { }
   #header  { height:40px; background:url(/wp-content/themes/walshhub/images/header.gif) 0 bottom repeat-x #fcfcfc; position:relative; }
    a#header-logo { position:absolute; top:7px; left:0; text-indent:-99999px; width:32px; height:25px; display:block; background:url(/wp-content/themes/walshhub/images/dwavatar.png) 0 0 no-repeat; }
    #header-title { font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype",Myriad Pro,Serif; font-size:2em; }
     #header-title a { color:#000; text-decoration:none; position:absolute; top:10px; left:40px; }

  #content { background:#fff; padding:10px 0 10px 0; }
   #content-left { width:700px; margin:0 20px 0 0; float:left; }
   #content-right { width:280px; float:left; }
    #content-right a { float:left; padding-right:10px; display:block; width:125px; height:125px; }

#footer  { background:#eee; border-top:1px solid #ccc; padding:10px 0; }
     #footer1, #footer2, #footer3 { width:300px; float:left; margin:0 30px 0 0; }
     #footer3 { width:330px; margin-right:0; }

  /* tags */
  abbr      { border-bottom:1px dotted #ccc; cursor:help; }
  blockquote     { background:#eee; margin:0 20px; padding:10px 20px; }
  code      { font-family:'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; }
  h1       { font-size:4.3em; margin:0 0 20px 0; }
  h2       { font-size:2.8em; }
   h1, h2, h3, h6   { font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype","Myriad Pro",Serif; }
  h3, h6      { font-size:2em; }
  h6       { padding:0 0 5px 0; }
  label,select,input[type='submit'],.point { cursor:pointer; }
  li       { }
  li,p      { line-height:19px; margin-top:5px; }
  ol, ul      { padding:0 0 10px 35px; }
  p       { margin:5px 0 14px 0; font-size:1.2em; line-height:1.8em; }
  textarea,input[type='text'], input[type='email'], input[type='password'] { border:1px solid #ccc; padding:5px; font-size:120%; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; }

  /* stuff */
  .clear       { clear:both; }
  .exhead      { background:#e8f0f6; border-top:1px solid #fff; color:#000; padding:10px 10px; font-size:120%; }
   .exhead a    { color:#6D84B4; }
  .intro      { background:#ffd987; font-style:italic; padding:5px 10px; margin-bottom:20px; }
  .relative     { position:relative; }

  /* links */
  a        { color:#3b5998; }
  a:link, a:visited   { text-decoration:underline; }
  a:hover, a:active   { text-decoration:none; }
  a img       { border:0; }

}

</style>
<script type="text/javascript">
window.onload = function() {
var paras = document.getElementById('content').getElementsByTagName('p');
if(paras.length) {
  paras[0].className = paras[0].className + ' intro';
}
};
</script> <link rel="stylesheet" href="harvesthq-chosen-12a7a11/chosen/chosen.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="harvesthq-chosen-12a7a11/chosen/chosen.jquery.js"></script>
<script>
  jQuery(document).ready(function(){
   jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
  });
</script>
</head>
<body>
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
  
  <div id="header"><div class="center relative">
   <a href="/" id="header-logo">David Walsh Blog</a>
   <div id="header-title"><a href="/">David Walsh Blog</a></div>
  </div></div>

<div class="exhead"><div class="center">
<strong>Example Page for:</strong> <a href="http://davidwalsh.name/jquery-chosen">jQuery Chosen Plugin</a>.
<a href="/demos" style="color:green;">Click here</a> to view more demos!
</div></div>
<div id="content"><div class="center">

<div id="content-left">
  <h1 style="margin-top:20px;">jQuery Chosen Plugin Example</h1>
<p>Play around with the SELECT dropdown elements below. Brilliant!</p>

<h2>Single Select Dropdown</h2>
<p>What's your favorite JavaScript Framework?</p>
<select class="chosen" style="width:200px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option>Dojo Toolkit</option>
</select>

<h2>Multiple Select Dropdown</h2>
<p>What's your favorite JavaScript Framework?</p>
<select class="chosen" multiple="true" style="width:400px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>

</div>
<div id="content-right">

<div id="bsap_1255973" class="bsarocks bsap_db3b221ddd8cbba67739ae3837520ffe" style="width:200px; margin: 20px auto;"></div>
<style>
  #bsap_1255973 a { float:none; }
</style>
<div style="clear:both;"></div>

<div class="exhead">
<strong><< Back to:</strong> <a href="http://davidwalsh.name/jquery-chosen">jQuery Chosen Plugin</a>
</div>