这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现下拉提示选择框的相关资料, 需要的朋友可以参考下
本文介绍了 select 和 sugget 结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤。 整体效果就是下面这样的:
1、首先需要引入如下文件
- <link href="select2.min.css" rel="stylesheet" />
- <script type="text/javascript" src="jquery-2.1.4.min.js">
- </script>
- <script type="text/javascript" src="select2.min.js">
- </script>
这里要注意 jquery 要放在 select2 的前面。 2、一些实例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <link href="select2.min.css" rel="stylesheet" />
- <style type="text/css">
- .select2-dropdown { margin-left: 8px !important; margin-top: 20px !important;
- }
- </style>
- </head>
- <body>
- <h1>
- 这是单选例子
- </h1>
- <div class="s1-example">
- <select class="js-example-basic-single" style="width:200px">
- <optgroup label="Alaskan/Hawaiian Time Zone">
- <option value="AK">
- Alaska
- </option>
- <option value="HI">
- Hawaii
- </option>
- <option value="">
- 请选择
- </option>
- </optgroup>
- <optgroup label="Pacific Time Zone">
- <option value="CA">
- California1111111111111111111111111111111111111111111111111
- </option>
- <option value="NV">
- Nevada
- </option>
- <option value="OR">
- Oregon
- </option>
- <option value="WA">
- Washington
- </option>
- </optgroup>
- <optgroup label="Mountain Time Zone">
- <option value="AZ">
- Arizona
- </option>
- <option value="CO">
- Colorado
- </option>
- <option value="ID">
- Idaho
- </option>
- <option value="MT">
- Montana
- </option>
- <option value="NE">
- Nebraska
- </option>
- <option value="NM">
- New Mexico
- </option>
- <option value="ND">
- North Dakota
- </option>
- <option value="UT">
- Utah
- </option>
- <option value="WY">
- Wyoming
- </option>
- </optgroup>
- <optgroup label="Central Time Zone">
- <option value="AL">
- Alabama
- </option>
- <option value="AR">
- Arkansas
- </option>
- <option value="IL">
- Illinois
- </option>
- <option value="IA">
- Iowa
- </option>
- <option value="KS">
- Kansas
- </option>
- <option value="KY">
- Kentucky
- </option>
- <option value="LA">
- Louisiana
- </option>
- <option value="MN">
- Minnesota
- </option>
- <option value="MS">
- Mississippi
- </option>
- <option value="MO">
- Missouri
- </option>
- <option value="OK">
- Oklahoma
- </option>
- <option value="SD">
- South Dakota
- </option>
- <option value="TX">
- Texas
- </option>
- <option value="TN">
- Tennessee
- </option>
- <option value="WI">
- Wisconsin
- </option>
- </optgroup>
- <optgroup label="Eastern Time Zone">
- <option value="CT">
- Connecticut
- </option>
- <option value="DE">
- Delaware
- </option>
- <option value="FL">
- Florida
- </option>
- <option value="GA">
- Georgia
- </option>
- <option value="IN">
- Indiana
- </option>
- <option value="ME">
- Maine
- </option>
- <option value="MD">
- Maryland
- </option>
- <option value="MA">
- Massachusetts
- </option>
- <option value="MI">
- Michigan
- </option>
- <option value="NH">
- New Hampshire
- </option>
- <option value="NJ">
- New Jersey
- </option>
- <option value="NY">
- New York
- </option>
- <option value="NC">
- North Carolina
- </option>
- <option value="OH">
- Ohio
- </option>
- <option value="PA">
- Pennsylvania
- </option>
- <option value="RI">
- Rhode Island
- </option>
- <option value="SC">
- South Carolina
- </option>
- <option value="VT">
- Vermont
- </option>
- <option value="VA">
- Virginia
- </option>
- <option value="WV">
- West Virginia
- </option>
- </optgroup>
- </select>
- </div>
- <h1>
- 这是多选例子
- </h1>
- <div class="s2-example">
- <select class="js-example-basic-multiple" multiple="multiple">
- <optgroup label="Alaskan/Hawaiian Time Zone">
- <option value="AK">
- Alaska
- </option>
- <option value="HI">
- Hawaii
- </option>
- <option value="">
- 请选择
- </option>
- </optgroup>
- <optgroup label="Pacific Time Zone">
- <option value="CA">
- California1111111111111111111111111111111111111111111111111
- </option>
- <option value="NV">
- Nevada
- </option>
- <option value="OR">
- Oregon
- </option>
- <option value="WA">
- Washington
- </option>
- </optgroup>
- <optgroup label="Mountain Time Zone">
- <option value="AZ">
- Arizona
- </option>
- <option value="CO">
- Colorado
- </option>
- <option value="ID">
- Idaho
- </option>
- <option value="MT">
- Montana
- </option>
- <option value="NE">
- Nebraska
- </option>
- <option value="NM">
- New Mexico
- </option>
- <option value="ND">
- North Dakota
- </option>
- <option value="UT">
- Utah
- </option>
- <option value="WY">
- Wyoming
- </option>
- </optgroup>
- <optgroup label="Central Time Zone">
- <option value="AL">
- Alabama
- </option>
- <option value="AR">
- Arkansas
- </option>
- <option value="IL">
- Illinois
- </option>
- <option value="IA">
- Iowa
- </option>
- <option value="KS">
- Kansas
- </option>
- <option value="KY">
- Kentucky
- </option>
- <option value="LA">
- Louisiana
- </option>
- <option value="MN">
- Minnesota
- </option>
- <option value="MS">
- Mississippi
- </option>
- <option value="MO">
- Missouri
- </option>
- <option value="OK">
- Oklahoma
- </option>
- <option value="SD">
- South Dakota
- </option>
- <option value="TX">
- Texas
- </option>
- <option value="TN">
- Tennessee
- </option>
- <option value="WI">
- Wisconsin
- </option>
- </optgroup>
- <optgroup label="Eastern Time Zone">
- <option value="CT">
- Connecticut
- </option>
- <option value="DE">
- Delaware
- </option>
- <option value="FL">
- Florida
- </option>
- <option value="GA">
- Georgia
- </option>
- <option value="IN">
- Indiana
- </option>
- <option value="ME">
- Maine
- </option>
- <option value="MD">
- Maryland
- </option>
- <option value="MA">
- Massachusetts
- </option>
- <option value="MI">
- Michigan
- </option>
- <option value="NH">
- New Hampshire
- </option>
- <option value="NJ">
- New Jersey
- </option>
- <option value="NY">
- New York
- </option>
- <option value="NC">
- North Carolina
- </option>
- <option value="OH">
- Ohio
- </option>
- <option value="PA">
- Pennsylvania
- </option>
- <option value="RI">
- Rhode Island
- </option>
- <option value="SC">
- South Carolina
- </option>
- <option value="VT">
- Vermont
- </option>
- <option value="VA">
- Virginia
- </option>
- <option value="WV">
- West Virginia
- </option>
- </optgroup>
- </select>
- </div>
- <h1>
- 这是可清除有提示例子
- </h1>
- <div class="s3-example">
- <select class="js-example-placeholder-single" style="width:200px">
- <optgroup label="Alaskan/Hawaiian Time Zone">
- <option value="AK">
- Alaska
- </option>
- <option value="HI">
- Hawaii
- </option>
- <option value="">
- 请选择
- </option>
- </optgroup>
- <optgroup label="Pacific Time Zone">
- <option value="CA">
- California1111111111111111111111111111111111111111111111111
- </option>
- <option value="NV">
- Nevada
- </option>
- <option value="OR">
- Oregon
- </option>
- <option value="WA">
- Washington
- </option>
- </optgroup>
- <optgroup label="Mountain Time Zone">
- <option value="AZ">
- Arizona
- </option>
- <option value="CO">
- Colorado
- </option>
- <option value="ID">
- Idaho
- </option>
- <option value="MT">
- Montana
- </option>
- <option value="NE">
- Nebraska
- </option>
- <option value="NM">
- New Mexico
- </option>
- <option value="ND">
- North Dakota
- </option>
- <option value="UT">
- Utah
- </option>
- <option value="WY">
- Wyoming
- </option>
- </optgroup>
- <optgroup label="Central Time Zone">
- <option value="AL">
- Alabama
- </option>
- <option value="AR">
- Arkansas
- </option>
- <option value="IL">
- Illinois
- </option>
- <option value="IA">
- Iowa
- </option>
- <option value="KS">
- Kansas
- </option>
- <option value="KY">
- Kentucky
- </option>
- <option value="LA">
- Louisiana
- </option>
- <option value="MN">
- Minnesota
- </option>
- <option value="MS">
- Mississippi
- </option>
- <option value="MO">
- Missouri
- </option>
- <option value="OK">
- Oklahoma
- </option>
- <option value="SD">
- South Dakota
- </option>
- <option value="TX">
- Texas
- </option>
- <option value="TN">
- Tennessee
- </option>
- <option value="WI">
- Wisconsin
- </option>
- </optgroup>
- <optgroup label="Eastern Time Zone">
- <option value="CT">
- Connecticut
- </option>
- <option value="DE">
- Delaware
- </option>
- <option value="FL">
- Florida
- </option>
- <option value="GA">
- Georgia
- </option>
- <option value="IN">
- Indiana
- </option>
- <option value="ME">
- Maine
- </option>
- <option value="MD">
- Maryland
- </option>
- <option value="MA">
- Massachusetts
- </option>
- <option value="MI">
- Michigan
- </option>
- <option value="NH">
- New Hampshire
- </option>
- <option value="NJ">
- New Jersey
- </option>
- <option value="NY">
- New York
- </option>
- <option value="NC">
- North Carolina
- </option>
- <option value="OH">
- Ohio
- </option>
- <option value="PA">
- Pennsylvania
- </option>
- <option value="RI">
- Rhode Island
- </option>
- <option value="SC">
- South Carolina
- </option>
- <option value="VT">
- Vermont
- </option>
- <option value="VA">
- Virginia
- </option>
- <option value="WV">
- West Virginia
- </option>
- </optgroup>
- </select>
- </div>
- <div class="s4-example">
- <select class="js-example-placeholder-multiple" multiple="multiple" style="width:400px">
- <optgroup label="Alaskan/Hawaiian Time Zone">
- <option value="AK">
- Alaska
- </option>
- <option value="HI">
- Hawaii
- </option>
- <option value="">
- 请选择
- </option>
- </optgroup>
- <optgroup label="Pacific Time Zone">
- <option value="CA">
- California1111111111111111111111111111111111111111111111111
- </option>
- <option value="NV">
- Nevada
- </option>
- <option value="OR">
- Oregon
- </option>
- <option value="WA">
- Washington
- </option>
- </optgroup>
- <optgroup label="Mountain Time Zone">
- <option value="AZ">
- Arizona
- </option>
- <option value="CO">
- Colorado
- </option>
- <option value="ID">
- Idaho
- </option>
- <option value="MT">
- Montana
- </option>
- <option value="NE">
- Nebraska
- </option>
- <option value="NM">
- New Mexico
- </option>
- <option value="ND">
- North Dakota
- </option>
- <option value="UT">
- Utah
- </option>
- <option value="WY">
- Wyoming
- </option>
- </optgroup>
- <optgroup label="Central Time Zone">
- <option value="AL">
- Alabama
- </option>
- <option value="AR">
- Arkansas
- </option>
- <option value="IL">
- Illinois
- </option>
- <option value="IA">
- Iowa
- </option>
- <option value="KS">
- Kansas
- </option>
- <option value="KY">
- Kentucky
- </option>
- <option value="LA">
- Louisiana
- </option>
- <option value="MN">
- Minnesota
- </option>
- <option value="MS">
- Mississippi
- </option>
- <option value="MO">
- Missouri
- </option>
- <option value="OK">
- Oklahoma
- </option>
- <option value="SD">
- South Dakota
- </option>
- <option value="TX">
- Texas
- </option>
- <option value="TN">
- Tennessee
- </option>
- <option value="WI">
- Wisconsin
- </option>
- </optgroup>
- <optgroup label="Eastern Time Zone">
- <option value="CT">
- Connecticut
- </option>
- <option value="DE">
- Delaware
- </option>
- <option value="FL">
- Florida
- </option>
- <option value="GA">
- Georgia
- </option>
- <option value="IN">
- Indiana
- </option>
- <option value="ME">
- Maine
- </option>
- <option value="MD">
- Maryland
- </option>
- <option value="MA">
- Massachusetts
- </option>
- <option value="MI">
- Michigan
- </option>
- <option value="NH">
- New Hampshire
- </option>
- <option value="NJ">
- New Jersey
- </option>
- <option value="NY">
- New York
- </option>
- <option value="NC">
- North Carolina
- </option>
- <option value="OH">
- Ohio
- </option>
- <option value="PA">
- Pennsylvania
- </option>
- <option value="RI">
- Rhode Island
- </option>
- <option value="SC">
- South Carolina
- </option>
- <option value="VT">
- Vermont
- </option>
- <option value="VA">
- Virginia
- </option>
- <option value="WV">
- West Virginia
- </option>
- </optgroup>
- </select>
- </div>
- <h1>
- 这是直接使用js对象初始化的例子
- </h1>
- <div>
- <select class="js-example-data-array" style="width:200px">
- </select>
- </div>
- <div>
- <select class="js-example-data-array-selected" style="width:200px">
- <option value="2" selected="selected">
- duplicate
- </option>
- </select>
- </div>
- <script type="text/javascript" src="jquery-2.1.4.min.js">
- </script>
- <script type="text/javascript" src="select2.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".js-example-basic-single").select2(); //单选
- $(".js-example-basic-multiple").select2(); //多选
- $(".js-example-placeholder-single").select2({ //允许清除
- placeholder: "Select a state",
- //默认提示语
- allowClear: true
- });
- $(".js-example-placeholder-multiple").select2({
- placeholder: "Select a state" //默认提示语
- });
- var data = [{
- id: 0,
- text: 'enhancement'
- },
- {
- id: 1,
- text: 'bug'
- },
- {
- id: 2,
- text: 'duplicate'
- },
- {
- id: 3,
- text: 'invalid'
- },
- {
- id: 4,
- text: 'wontfix'
- }];
- $(".js-example-data-array").select2({
- data: data
- })
- $(".js-example-data-array-selected").select2({
- data: data
- })
- });
- </script>
- </body>
- </html>
3、效果效果 1
效果 2
还有一些其它的内容,比如果说支持通过 ajax 查找来填充,支持 input 等,想要了解更多内容的朋友请阅读相关文章。
来源: http://www.phperz.com/article/17/0425/267843.html