home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-20 02:06:00 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
e514bde0677133a8fa65eeb8060761a74fbceced
ant-design/components/select-cn/index.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

448 lines
156 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="566281123"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/index-cn" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">搜索组件...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/index-cn" data-reactid="33"><span data-reactid="34">首页</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce-cn" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started-cn" data-reactid="54">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects-cn" data-reactid="56">项目实战</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app-cn" data-reactid="58">在 create-react-app 中使用</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme-cn" data-reactid="60">定制主题</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog-cn" data-reactid="62">更新日志</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation-cn" data-reactid="64">社区精选组件</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n 方案<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button-cn/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85">按钮</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon-cn/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89">图标</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid-cn/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96">栅格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout-cn/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100">布局</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix-cn/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107">固钉</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb-cn/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111">面包屑</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top-cn/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115">回到顶部</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown-cn/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119">下拉菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu-cn/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123">导航菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination-cn/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127">分页</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps-cn/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131">步骤条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs-cn/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135">标签页</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete-cn/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142">自动完成</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader-cn/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146">级联选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox-cn/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150">多选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker-cn/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154">日期选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form-cn/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158">表单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input-cn/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162">输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number-cn/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166">数字输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention-cn/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170">提及</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate-cn/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174">评分</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio-cn/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178">单选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="179"><a href="/components/select-cn/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182">选择器</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider-cn/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186">滑动输入条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch-cn/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190">开关</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select-cn/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194">树选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker-cn/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198">时间选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer-cn/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202">穿梭框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload-cn/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206">上传</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge-cn/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213">徽标数</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar-cn/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217">日历</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card-cn/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221">卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel-cn/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225">走马灯</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse-cn/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229">折叠面板</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover-cn/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233">气泡卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip-cn/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237">文字提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table-cn/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241">表格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag-cn/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245">标签</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline-cn/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249">时间轴</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree-cn/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert-cn/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260">警告提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal-cn/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264">对话框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message-cn/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268">全局提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification-cn/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272">通知提醒框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress-cn/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276">进度条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm-cn/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280">气泡确认框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin-cn/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284">加载中</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor-cn/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291">锚点</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider-cn/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="基本使用" data-reactid="301"><a href="#components-select-demo-basic" data-reactid="302">基本使用</a></li><li title="三种大小" data-reactid="303"><a href="#components-select-demo-size" data-reactid="304">三种大小</a></li><li title="带搜索框" data-reactid="305"><a href="#components-select-demo-search" data-reactid="306">带搜索框</a></li><li title="多选" data-reactid="307"><a href="#components-select-demo-multiple" data-reactid="308">多选</a></li><li title="标签" data-reactid="309"><a href="#components-select-demo-tags" data-reactid="310">标签</a></li><li title="智能提示" data-reactid="311"><a href="#components-select-demo-combobox" data-reactid="312">智能提示</a></li><li title="分组" data-reactid="313"><a href="#components-select-demo-optgroup" data-reactid="314">分组</a></li><li title="联动" data-reactid="315"><a href="#components-select-demo-coordinate" data-reactid="316">联动</a></li><li title="搜索框" data-reactid="317"><a href="#components-select-demo-search-box" data-reactid="318">搜索框</a></li><li title="获得选项的文本" data-reactid="319"><a href="#components-select-demo-label-in-value" data-reactid="320">获得选项的文本</a></li><li title="自动分词" data-reactid="321"><a href="#components-select-demo-automatic-tokenization" data-reactid="322">自动分词</a></li></ul></div></div><section class="markdown" data-reactid="323"><h1 data-reactid="324"><!-- react-text: 325 -->Select<!-- /react-text --><span class="subtitle" data-reactid="326">选择器</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/index.zh-CN.md" data-reactid="327"><i class="anticon anticon-edit" data-reactid="328"></i></a></h1><section class="markdown" data-reactid="329"><p data-reactid="330"><!-- react-text: 331 -->类似 Select2 的选择器。<!-- /react-text --></p><h2 id="何时使用" data-reactid="332"><span data-reactid="333"><!-- react-text: 334 -->何时使用<!-- /react-text --></span><a href="#何时使用" class="anchor" data-reactid="335">#</a></h2><ul data-reactid="336"><li data-reactid="337"><p data-reactid="338"><!-- react-text: 339 -->弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。<!-- /react-text --></p></li><li data-reactid="340"><p data-reactid="341"><!-- react-text: 342 -->当选项少时（少于 5 项），建议直接将选项平铺，使用 <!-- /react-text --><a href="/components/radio-cn/" data-reactid="343">Radio</a><!-- react-text: 344 --> 是更好的选择。<!-- /react-text --></p></li></ul></section><h2 data-reactid="345"><span data-reactid="346">代码演示</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="347"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="348"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="349"><section class="code-box" id="components-select-demo-basic" data-reactid="350"><section class="code-box-demo" data-reactid="351"><div data-reactid="352"><div style="width:120px;" class="ant-select ant-select-enabled" data-reactid="353"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="354"><div class="ant-select-selection__rendered" data-reactid="355"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="356">Lucy</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="357"><b data-reactid="358"></b></span></div></div><div style="width:120px;" class="ant-select ant-select-disabled ant-select-allow-clear" data-reactid="359"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="360"><div class="ant-select-selection__rendered" data-reactid="361"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="362">Lucy</div></div><span style="user-select:none;-webkit-user-select:none;display:block;" unselectable="unselectable" class="ant-select-selection__clear" data-reactid="363"></span><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="364"><b data-reactid="365"></b></span></div></div></div></section><section class="code-box-meta markdown" data-reactid="366"><div class="code-box-title" data-reactid="367"><a href="#components-select-demo-basic" data-reactid="368">基本使用</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/basic.md" data-reactid="369"><i class="anticon anticon-edit" data-reactid="370"></i></a></div><div data-reactid="371"><p data-reactid="372"><!-- react-text: 373 -->基本使用。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="374"></i></section><section class="highlight-wrapper" data-reactid="375"><div class="highlight" data-reactid="376"><i class="anticon anticon-copy code-box-code-copy" data-reactid="377"></i><pre class="language-jsx" data-reactid="378"><code data-reactid="379"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">120</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Yiminghe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>yiminghe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">120</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">allowClear</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-search" data-reactid="380"><section class="code-box-demo" data-reactid="381"><div style="width:200px;" class="ant-select ant-select-enabled" data-reactid="382"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="383"><div class="ant-select-selection__rendered" data-reactid="384"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="385">Select a person</div><div class="ant-select-search ant-select-search--inline" style="display:none;" data-reactid="386"><div class="ant-select-search__field__wrap" data-reactid="387"><input value="" class="ant-select-search__field" data-reactid="388"/><span class="ant-select-search__field__mirror" data-reactid="389"><!-- react-text: 390 --><!-- /react-text --><!-- react-text: 391 --> <!-- /react-text --></span></div></div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="392"><b data-reactid="393"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="394"><div class="code-box-title" data-reactid="395"><a href="#components-select-demo-search" data-reactid="396">带搜索框</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/search.md" data-reactid="397"><i class="anticon anticon-edit" data-reactid="398"></i></a></div><div data-reactid="399"><p data-reactid="400"><!-- react-text: 401 -->展开后可对选项进行搜索。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="402"></i></section><section class="highlight-wrapper" data-reactid="403"><div class="highlight" data-reactid="404"><i class="anticon anticon-copy code-box-code-copy" data-reactid="405"></i><pre class="language-jsx" data-reactid="406"><code data-reactid="407"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>
<span class="token attr-name">showSearch</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select</span> <span class="token attr-name">a</span> <span class="token attr-name">person"</span>
<span class="token attr-name">optionFilterProp</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>children<span class="token punctuation">"</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">filterOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> option<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> option<span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>input<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-tags" data-reactid="408"><section class="code-box-demo" data-reactid="409"><div style="width:100%;" class="ant-select ant-select-enabled" data-reactid="410"><div class="ant-select-selection
ant-select-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="411"><div class="ant-select-selection__rendered" data-reactid="412"><ul data-reactid="413"><li class="ant-select-search ant-select-search--inline" data-reactid="414"><div class="ant-select-search__field__wrap" data-reactid="415"><input value="" class="ant-select-search__field" data-reactid="416"/><span class="ant-select-search__field__mirror" data-reactid="417"><!-- react-text: 418 --><!-- /react-text --><!-- react-text: 419 --> <!-- /react-text --></span></div></li></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="420"><div class="code-box-title" data-reactid="421"><a href="#components-select-demo-tags" data-reactid="422">标签</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/tags.md" data-reactid="423"><i class="anticon anticon-edit" data-reactid="424"></i></a></div><div data-reactid="425"><p data-reactid="426"><!-- react-text: 427 -->tags select，随意输入的内容（scroll the menu）<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="428"></i></section><section class="highlight-wrapper" data-reactid="429"><div class="highlight" data-reactid="430"><i class="anticon anticon-copy code-box-code-copy" data-reactid="431"></i><pre class="language-jsx" data-reactid="432"><code data-reactid="433"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">36</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">tags</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>标签模式<span class="token punctuation">"</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>children<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-optgroup" data-reactid="434"><section class="code-box-demo" data-reactid="435"><div style="width:200px;" class="ant-select ant-select-enabled" data-reactid="436"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="437"><div class="ant-select-selection__rendered" data-reactid="438"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="439">Lucy</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="440"><b data-reactid="441"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="442"><div class="code-box-title" data-reactid="443"><a href="#components-select-demo-optgroup" data-reactid="444">分组</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/optgroup.md" data-reactid="445"><i class="anticon anticon-edit" data-reactid="446"></i></a></div><div data-reactid="447"><p data-reactid="448"><!-- react-text: 449 -->用 <!-- /react-text --><code data-reactid="450"><!-- react-text: 451 -->OptGroup<!-- /react-text --></code><!-- react-text: 452 --> 进行选项分组。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="453"></i></section><section class="highlight-wrapper" data-reactid="454"><div class="highlight" data-reactid="455"><i class="anticon anticon-copy code-box-code-copy" data-reactid="456"></i><pre class="language-jsx" data-reactid="457"><code data-reactid="458"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> OptGroup <span class="token operator">=</span> Select<span class="token punctuation">.</span>OptGroup<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>
<span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>OptGroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Manager<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>OptGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>OptGroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Engineer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Yiminghe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>yiminghe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>OptGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-search-box" data-reactid="459"><section class="code-box-demo" data-reactid="460"><div style="width:200px;" class="ant-select ant-select-combobox ant-select-enabled" data-reactid="461"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="462"><div class="ant-select-selection__rendered" data-reactid="463"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="464">input search text</div><ul data-reactid="465"><li class="ant-select-search ant-select-search--inline" data-reactid="466"><div class="ant-select-search__field__wrap" data-reactid="467"><input value="" class="ant-select-search__field" data-reactid="468"/><span class="ant-select-search__field__mirror" data-reactid="469"><!-- react-text: 470 --><!-- /react-text --><!-- react-text: 471 --> <!-- /react-text --></span></div></li></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="472"><div class="code-box-title" data-reactid="473"><a href="#components-select-demo-search-box" data-reactid="474">搜索框</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/search-box.md" data-reactid="475"><i class="anticon anticon-edit" data-reactid="476"></i></a></div><div data-reactid="477"><p data-reactid="478"><!-- react-text: 479 -->自动补全和远程数据结合。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="480"></i></section><section class="highlight-wrapper" data-reactid="481"><div class="highlight" data-reactid="482"><i class="anticon anticon-copy code-box-code-copy" data-reactid="483"></i><pre class="language-jsx" data-reactid="484"><code data-reactid="485"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> jsonp <span class="token keyword">from</span> <span class="token string">'fetch-jsonp'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> querystring <span class="token keyword">from</span> <span class="token string">'querystring'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">let</span> timeout<span class="token punctuation">;</span>
<span class="token keyword">let</span> currentValue<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">fetch</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>timeout<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span><span class="token punctuation">;</span>
timeout <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
currentValue <span class="token operator">=</span> value<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">fake</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> querystring<span class="token punctuation">.</span><span class="token function">encode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
code<span class="token punctuation">:</span> <span class="token string">'utf-8'</span><span class="token punctuation">,</span>
q<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">jsonp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`https://suggest.taobao.com/sug?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>response <span class="token operator">=</span><span class="token operator">></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentValue <span class="token operator">===</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> d<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
result<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
value<span class="token punctuation">:</span> r<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
text<span class="token punctuation">:</span> r<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">callback</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
timeout <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>fake<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">SearchInput</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fetch</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> data <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>d <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>d<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>d<span class="token punctuation">.</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>
<span class="token attr-name">combobox</span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>placeholder<span class="token punctuation">}</span></span>
<span class="token attr-name">notFoundContent</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>style<span class="token punctuation">}</span></span>
<span class="token attr-name">defaultActiveFirstOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">showArrow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">filterOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>options<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SearchInput</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">search</span> <span class="token attr-name">text"</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-automatic-tokenization" data-reactid="486"><section class="code-box-demo" data-reactid="487"><div style="width:100%;" class="ant-select ant-select-enabled" data-reactid="488"><div class="ant-select-selection
ant-select-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="489"><div class="ant-select-selection__rendered" data-reactid="490"><ul data-reactid="491"><li class="ant-select-search ant-select-search--inline" data-reactid="492"><div class="ant-select-search__field__wrap" data-reactid="493"><input value="" class="ant-select-search__field" data-reactid="494"/><span class="ant-select-search__field__mirror" data-reactid="495"><!-- react-text: 496 --><!-- /react-text --><!-- react-text: 497 --> <!-- /react-text --></span></div></li></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="498"><div class="code-box-title" data-reactid="499"><a href="#components-select-demo-automatic-tokenization" data-reactid="500">自动分词</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/automatic-tokenization.md" data-reactid="501"><i class="anticon anticon-edit" data-reactid="502"></i></a></div><div data-reactid="503"><p data-reactid="504"><!-- react-text: 505 -->试下复制 <!-- /react-text --><code data-reactid="506"><!-- react-text: 507 -->露西,杰克<!-- /react-text --></code><!-- react-text: 508 --> 到输入框里。只在 tags 和 multiple 模式下可用。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="509"></i></section><section class="highlight-wrapper" data-reactid="510"><div class="highlight" data-reactid="511"><i class="anticon anticon-copy code-box-code-copy" data-reactid="512"></i><pre class="language-jsx" data-reactid="513"><code data-reactid="514"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">36</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>
<span class="token attr-name">tags</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">tokenSeparators</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">','</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>children<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="515"><section class="code-box" id="components-select-demo-size" data-reactid="516"><section class="code-box-demo" data-reactid="517"><div data-reactid="518"><div style="width:200px;" class="ant-select-lg ant-select ant-select-enabled" data-reactid="519"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="520"><div class="ant-select-selection__rendered" data-reactid="521"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="522">Lucy</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="523"><b data-reactid="524"></b></span></div></div><div style="width:200px;" class="ant-select ant-select-enabled" data-reactid="525"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="526"><div class="ant-select-selection__rendered" data-reactid="527"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="528">Lucy</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="529"><b data-reactid="530"></b></span></div></div><div style="width:200px;" class="ant-select-sm ant-select ant-select-enabled" data-reactid="531"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="532"><div class="ant-select-selection__rendered" data-reactid="533"><div class="ant-select-selection-selected-value" title="Lucy" style="display:block;opacity:1;" data-reactid="534">Lucy</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="535"><b data-reactid="536"></b></span></div></div></div><style data-reactid="537">.code-box-demo .ant-select {
margin: 0 8px 10px 0;
}
#components-select-demo-search-box .code-box-demo .ant-select {
margin: 0;
}</style></section><section class="code-box-meta markdown" data-reactid="538"><div class="code-box-title" data-reactid="539"><a href="#components-select-demo-size" data-reactid="540">三种大小</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/size.md" data-reactid="541"><i class="anticon anticon-edit" data-reactid="542"></i></a></div><div data-reactid="543"><p data-reactid="544"><!-- react-text: 545 -->三种大小的选择框，当 size 分别为 <!-- /react-text --><code data-reactid="546"><!-- react-text: 547 -->large<!-- /react-text --></code><!-- react-text: 548 --> 和 <!-- /react-text --><code data-reactid="549"><!-- react-text: 550 -->small<!-- /react-text --></code><!-- react-text: 551 --> 时，输入框高度为 <!-- /react-text --><code data-reactid="552"><!-- react-text: 553 -->32px<!-- /react-text --></code><!-- react-text: 554 --> 和 <!-- /react-text --><code data-reactid="555"><!-- react-text: 556 -->22px<!-- /react-text --></code><!-- react-text: 557 --> ，默认高度为 <!-- /react-text --><code data-reactid="558"><!-- react-text: 559 -->28px<!-- /react-text --></code></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="560"></i></section><section class="highlight-wrapper" data-reactid="561"><div class="highlight" data-reactid="562"><i class="anticon anticon-copy code-box-code-copy" data-reactid="563"></i><pre class="language-jsx" data-reactid="564"><code data-reactid="565"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yiminghe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Yiminghe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yiminghe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Yiminghe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yiminghe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Yiminghe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="566"><pre data-reactid="567"><code class="css" data-reactid="568"><span class="token selector"><span class="token class">.code-box-demo</span> <span class="token class">.ant-select</span> </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">8</span>px <span class="token number">10</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token id">#components-select-demo-search-box</span> <span class="token class">.code-box-demo</span> <span class="token class">.ant-select</span> </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-multiple" data-reactid="569"><section class="code-box-demo" data-reactid="570"><div style="width:100%;" class="ant-select ant-select-enabled" data-reactid="571"><div class="ant-select-selection
ant-select-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="572"><div class="ant-select-selection__rendered" data-reactid="573"><div style="display:none;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="574">Please select</div><ul data-reactid="575"><li style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__choice" title="a10" data-reactid="576"><div class="ant-select-selection__choice__content" data-reactid="577">a10</div><span class="ant-select-selection__choice__remove" data-reactid="578"></span></li><li style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__choice" title="c12" data-reactid="579"><div class="ant-select-selection__choice__content" data-reactid="580">c12</div><span class="ant-select-selection__choice__remove" data-reactid="581"></span></li><li class="ant-select-search ant-select-search--inline" data-reactid="582"><div class="ant-select-search__field__wrap" data-reactid="583"><input value="" class="ant-select-search__field" data-reactid="584"/><span class="ant-select-search__field__mirror" data-reactid="585"><!-- react-text: 586 --><!-- /react-text --><!-- react-text: 587 --> <!-- /react-text --></span></div></li></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="588"><div class="code-box-title" data-reactid="589"><a href="#components-select-demo-multiple" data-reactid="590">多选</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/multiple.md" data-reactid="591"><i class="anticon anticon-edit" data-reactid="592"></i></a></div><div data-reactid="593"><p data-reactid="594"><!-- react-text: 595 -->多选，从已有条目中选择（scroll the menu）<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="596"></i></section><section class="highlight-wrapper" data-reactid="597"><div class="highlight" data-reactid="598"><i class="anticon anticon-copy code-box-code-copy" data-reactid="599"></i><pre class="language-jsx" data-reactid="600"><code data-reactid="601"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">36</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>i<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">36</span><span class="token punctuation">)</span> <span class="token operator">+</span> i<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>
<span class="token attr-name">multiple</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please</span> <span class="token attr-name">select"</span>
<span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'a10'</span><span class="token punctuation">,</span> <span class="token string">'c12'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>children<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-combobox" data-reactid="602"><section class="code-box-demo" data-reactid="603"><div style="width:200px;" class="ant-select ant-select-combobox ant-select-enabled" data-reactid="604"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="605"><div class="ant-select-selection__rendered" data-reactid="606"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="607">Enter the account name</div><ul data-reactid="608"><li class="ant-select-search ant-select-search--inline" data-reactid="609"><div class="ant-select-search__field__wrap" data-reactid="610"><input value="" class="ant-select-search__field" data-reactid="611"/><span class="ant-select-search__field__mirror" data-reactid="612"><!-- react-text: 613 --><!-- /react-text --><!-- react-text: 614 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="615"><b data-reactid="616"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="617"><div class="code-box-title" data-reactid="618"><a href="#components-select-demo-combobox" data-reactid="619">智能提示</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/combobox.md" data-reactid="620"><i class="anticon anticon-edit" data-reactid="621"></i></a></div><div data-reactid="622"><p data-reactid="623"><!-- react-text: 624 -->输入框自动完成功能，下面是一个账号注册表单的例子。<!-- /react-text --></p><p data-reactid="625"><!-- react-text: 626 -->推荐使用 <!-- /react-text --><a href="/components/auto-complete-cn/" data-reactid="627">AutoComplete</a><!-- react-text: 628 --> 组件。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="629"></i></section><section class="highlight-wrapper" data-reactid="630"><div class="highlight" data-reactid="631"><i class="anticon anticon-copy code-box-code-copy" data-reactid="632"></i><pre class="language-jsx" data-reactid="633"><code data-reactid="634"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
options<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> options<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value <span class="token operator">||</span> value<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
options <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
options <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'gmail.com'</span><span class="token punctuation">,</span> <span class="token string">'163.com'</span><span class="token punctuation">,</span> <span class="token string">'qq.com'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>domain<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> email <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>domain<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>email<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>email<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> options <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">// filterOption needs to be false，as the value is dynamically generated</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">combobox</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">filterOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter</span> <span class="token attr-name">the</span> <span class="token attr-name">account</span> <span class="token attr-name">name"</span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>options<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-coordinate" data-reactid="635"><section class="code-box-demo" data-reactid="636"><div data-reactid="637"><div style="width:90px;" class="ant-select ant-select-enabled" data-reactid="638"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="639"><div class="ant-select-selection__rendered" data-reactid="640"><div class="ant-select-selection-selected-value" title="Zhejiang" style="display:block;opacity:1;" data-reactid="641">Zhejiang</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="642"><b data-reactid="643"></b></span></div></div><div style="width:90px;" class="ant-select ant-select-enabled" data-reactid="644"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="645"><div class="ant-select-selection__rendered" data-reactid="646"><div class="ant-select-selection-selected-value" title="Hangzhou" style="display:block;opacity:1;" data-reactid="647">Hangzhou</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="648"><b data-reactid="649"></b></span></div></div></div></section><section class="code-box-meta markdown" data-reactid="650"><div class="code-box-title" data-reactid="651"><a href="#components-select-demo-coordinate" data-reactid="652">联动</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/coordinate.md" data-reactid="653"><i class="anticon anticon-edit" data-reactid="654"></i></a></div><div data-reactid="655"><p data-reactid="656"><!-- react-text: 657 -->省市联动是典型的例子。<!-- /react-text --></p><p data-reactid="658"><!-- react-text: 659 -->推荐使用 <!-- /react-text --><a href="/components/cascader-cn/" data-reactid="660">Cascader</a><!-- react-text: 661 --> 组件。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="662"></i></section><section class="highlight-wrapper" data-reactid="663"><div class="highlight" data-reactid="664"><i class="anticon anticon-copy code-box-code-copy" data-reactid="665"></i><pre class="language-jsx" data-reactid="666"><code data-reactid="667"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> provinceData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Zhejiang'</span><span class="token punctuation">,</span> <span class="token string">'Jiangsu'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cityData <span class="token operator">=</span> <span class="token punctuation">{</span>
Zhejiang<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Hangzhou'</span><span class="token punctuation">,</span> <span class="token string">'Ningbo'</span><span class="token punctuation">,</span> <span class="token string">'Wenzhou'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
Jiangsu<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Nanjing'</span><span class="token punctuation">,</span> <span class="token string">'Suzhou'</span><span class="token punctuation">,</span> <span class="token string">'Zhenjiang'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
cities<span class="token punctuation">:</span> cityData<span class="token punctuation">[</span>provinceData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
secondCity<span class="token punctuation">:</span> cityData<span class="token punctuation">[</span>provinceData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleProvinceChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
cities<span class="token punctuation">:</span> cityData<span class="token punctuation">[</span>value<span class="token punctuation">]</span><span class="token punctuation">,</span>
secondCity<span class="token punctuation">:</span> cityData<span class="token punctuation">[</span>value<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onSecondCityChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
secondCity<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> provinceOptions <span class="token operator">=</span> provinceData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>province <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>province<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>province<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cityOptions <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>cities<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>city <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>city<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>city<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>provinceData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">90</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleProvinceChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>provinceOptions<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>secondCity<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">90</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSecondCityChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>cityOptions<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-select-demo-label-in-value" data-reactid="668"><section class="code-box-demo" data-reactid="669"><div style="width:120px;" class="ant-select ant-select-enabled" data-reactid="670"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="671"><div class="ant-select-selection__rendered" data-reactid="672"><div class="ant-select-selection-selected-value" title="Lucy (101)" style="display:block;opacity:1;" data-reactid="673">Lucy (101)</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="674"><b data-reactid="675"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="676"><div class="code-box-title" data-reactid="677"><a href="#components-select-demo-label-in-value" data-reactid="678">获得选项的文本</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/select/demo/label-in-value.md" data-reactid="679"><i class="anticon anticon-edit" data-reactid="680"></i></a></div><div data-reactid="681"><p data-reactid="682"><!-- react-text: 683 -->默认情况下 <!-- /react-text --><code data-reactid="684"><!-- react-text: 685 -->onChange<!-- /react-text --></code><!-- react-text: 686 --> 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 <!-- /react-text --><code data-reactid="687"><!-- react-text: 688 -->labelInValue<!-- /react-text --></code><!-- react-text: 689 --> 属性。<!-- /react-text --></p><p data-reactid="690"><!-- react-text: 691 -->选中项的 label 会被包装到 value 中传递给 <!-- /react-text --><code data-reactid="692"><!-- react-text: 693 -->onChange<!-- /react-text --></code><!-- react-text: 694 --> 等函数，此时 value 是一个对象。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="695"></i></section><section class="highlight-wrapper" data-reactid="696"><div class="highlight" data-reactid="697"><i class="anticon anticon-copy code-box-code-copy" data-reactid="698"></i><pre class="language-jsx" data-reactid="699"><code data-reactid="700"><span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// { key: "lucy", label: "Lucy (101)" }</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">labelInValue</span> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'lucy'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">120</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack <span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lucy <span class="token punctuation">(</span><span class="token number">101</span><span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="701"><h2 id="API" data-reactid="702"><span data-reactid="703"><!-- react-text: 704 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="705">#</a></h2><pre class="language-html" data-reactid="706"><code data-reactid="707"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</span><span class="token punctuation">></span></span></code></pre><h3 id="Select-props" data-reactid="708"><span data-reactid="709"><!-- react-text: 710 -->Select props<!-- /react-text --></span><a href="#Select-props" class="anchor" data-reactid="711">#</a></h3><table data-reactid="712"><thead data-reactid="713"><tr data-reactid="714"><th data-reactid="715"><!-- react-text: 716 -->参数<!-- /react-text --></th><th data-reactid="717"><!-- react-text: 718 -->说明<!-- /react-text --></th><th data-reactid="719"><!-- react-text: 720 -->类型<!-- /react-text --></th><th data-reactid="721"><!-- react-text: 722 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="723"><tr data-reactid="724"><td data-reactid="725"><!-- react-text: 726 -->value<!-- /react-text --></td><td data-reactid="727"><!-- react-text: 728 -->指定当前选中的条目<!-- /react-text --></td><td data-reactid="729"><!-- react-text: 730 -->string<!-- /react-text --><!-- react-text: 731 -->|<!-- /react-text --><!-- react-text: 732 -->string[]<!-- /react-text --></td><td data-reactid="733"><!-- react-text: 734 -->-<!-- /react-text --></td></tr><tr data-reactid="735"><td data-reactid="736"><!-- react-text: 737 -->defaultValue<!-- /react-text --></td><td data-reactid="738"><!-- react-text: 739 -->指定默认选中的条目<!-- /react-text --></td><td data-reactid="740"><!-- react-text: 741 -->string<!-- /react-text --><!-- react-text: 742 -->|<!-- /react-text --><!-- react-text: 743 -->string[]<!-- /react-text --></td><td data-reactid="744"><!-- react-text: 745 -->-<!-- /react-text --></td></tr><tr data-reactid="746"><td data-reactid="747"><!-- react-text: 748 -->multiple<!-- /react-text --></td><td data-reactid="749"><!-- react-text: 750 -->支持多选<!-- /react-text --></td><td data-reactid="751"><!-- react-text: 752 -->boolean<!-- /react-text --></td><td data-reactid="753"><!-- react-text: 754 -->false<!-- /react-text --></td></tr><tr data-reactid="755"><td data-reactid="756"><!-- react-text: 757 -->allowClear<!-- /react-text --></td><td data-reactid="758"><!-- react-text: 759 -->支持清除, 单选模式有效<!-- /react-text --></td><td data-reactid="760"><!-- react-text: 761 -->boolean<!-- /react-text --></td><td data-reactid="762"><!-- react-text: 763 -->false<!-- /react-text --></td></tr><tr data-reactid="764"><td data-reactid="765"><!-- react-text: 766 -->filterOption<!-- /react-text --></td><td data-reactid="767"><!-- react-text: 768 -->是否根据输入项进行筛选。当其为一个函数时，会接收 <!-- /react-text --><code data-reactid="769"><!-- react-text: 770 -->inputValue<!-- /react-text --></code><!-- react-text: 771 --> <!-- /react-text --><code data-reactid="772"><!-- react-text: 773 -->option<!-- /react-text --></code><!-- react-text: 774 --> 两个参数，当 <!-- /react-text --><code data-reactid="775"><!-- react-text: 776 -->option<!-- /react-text --></code><!-- react-text: 777 --> 符合筛选条件时，应返回 <!-- /react-text --><code data-reactid="778"><!-- react-text: 779 -->true<!-- /react-text --></code><!-- react-text: 780 -->，反之则返回 <!-- /react-text --><code data-reactid="781"><!-- react-text: 782 -->false<!-- /react-text --></code><!-- react-text: 783 -->。<!-- /react-text --></td><td data-reactid="784"><!-- react-text: 785 -->boolean or function(inputValue, option)<!-- /react-text --></td><td data-reactid="786"><!-- react-text: 787 -->true<!-- /react-text --></td></tr><tr data-reactid="788"><td data-reactid="789"><!-- react-text: 790 -->tags<!-- /react-text --></td><td data-reactid="791"><!-- react-text: 792 -->可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配<!-- /react-text --></td><td data-reactid="793"><!-- react-text: 794 -->boolean<!-- /react-text --></td><td data-reactid="795"><!-- react-text: 796 -->false<!-- /react-text --></td></tr><tr data-reactid="797"><td data-reactid="798"><!-- react-text: 799 -->onSelect<!-- /react-text --></td><td data-reactid="800"><!-- react-text: 801 -->被选中时调用，参数为选中项的 value (或 key) 值<!-- /react-text --></td><td data-reactid="802"><!-- react-text: 803 -->function(value, option)<!-- /react-text --></td><td data-reactid="804"><!-- react-text: 805 -->-<!-- /react-text --></td></tr><tr data-reactid="806"><td data-reactid="807"><!-- react-text: 808 -->onDeselect<!-- /react-text --></td><td data-reactid="809"><!-- react-text: 810 -->取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效<!-- /react-text --></td><td data-reactid="811"><!-- react-text: 812 -->function(value)<!-- /react-text --></td><td data-reactid="813"><!-- react-text: 814 -->-<!-- /react-text --></td></tr><tr data-reactid="815"><td data-reactid="816"><!-- react-text: 817 -->onChange<!-- /react-text --></td><td data-reactid="818"><!-- react-text: 819 -->选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数<!-- /react-text --></td><td data-reactid="820"><!-- react-text: 821 -->function(value)<!-- /react-text --></td><td data-reactid="822"><!-- react-text: 823 -->-<!-- /react-text --></td></tr><tr data-reactid="824"><td data-reactid="825"><!-- react-text: 826 -->onSearch<!-- /react-text --></td><td data-reactid="827"><!-- react-text: 828 -->文本框值变化时回调<!-- /react-text --></td><td data-reactid="829"><!-- react-text: 830 -->function(value: string)<!-- /react-text --></td><td data-reactid="831"></td></tr><tr data-reactid="832"><td data-reactid="833"><!-- react-text: 834 -->onBlur<!-- /react-text --></td><td data-reactid="835"><!-- react-text: 836 -->失去焦点的时回调<!-- /react-text --></td><td data-reactid="837"><!-- react-text: 838 -->function<!-- /react-text --></td><td data-reactid="839"><!-- react-text: 840 -->-<!-- /react-text --></td></tr><tr data-reactid="841"><td data-reactid="842"><!-- react-text: 843 -->onFocus<!-- /react-text --></td><td data-reactid="844"><!-- react-text: 845 -->获得焦点时回调<!-- /react-text --></td><td data-reactid="846"><!-- react-text: 847 -->function<!-- /react-text --></td><td data-reactid="848"><!-- react-text: 849 -->-<!-- /react-text --></td></tr><tr data-reactid="850"><td data-reactid="851"><!-- react-text: 852 -->placeholder<!-- /react-text --></td><td data-reactid="853"><!-- react-text: 854 -->选择框默认文字<!-- /react-text --></td><td data-reactid="855"><!-- react-text: 856 -->string<!-- /react-text --></td><td data-reactid="857"><!-- react-text: 858 -->-<!-- /react-text --></td></tr><tr data-reactid="859"><td data-reactid="860"><!-- react-text: 861 -->notFoundContent<!-- /react-text --></td><td data-reactid="862"><!-- react-text: 863 -->当下拉列表为空时显示的内容<!-- /react-text --></td><td data-reactid="864"><!-- react-text: 865 -->string<!-- /react-text --></td><td data-reactid="866"><!-- react-text: 867 -->&#x27;Not Found&#x27;<!-- /react-text --></td></tr><tr data-reactid="868"><td data-reactid="869"><!-- react-text: 870 -->dropdownMatchSelectWidth<!-- /react-text --></td><td data-reactid="871"><!-- react-text: 872 -->下拉菜单和选择器同宽<!-- /react-text --></td><td data-reactid="873"><!-- react-text: 874 -->boolean<!-- /react-text --></td><td data-reactid="875"><!-- react-text: 876 -->true<!-- /react-text --></td></tr><tr data-reactid="877"><td data-reactid="878"><!-- react-text: 879 -->optionFilterProp<!-- /react-text --></td><td data-reactid="880"><!-- react-text: 881 -->搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索<!-- /react-text --></td><td data-reactid="882"><!-- react-text: 883 -->string<!-- /react-text --></td><td data-reactid="884"><!-- react-text: 885 -->value<!-- /react-text --></td></tr><tr data-reactid="886"><td data-reactid="887"><!-- react-text: 888 -->optionLabelProp<!-- /react-text --></td><td data-reactid="889"><!-- react-text: 890 -->回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 <!-- /react-text --><code data-reactid="891"><!-- react-text: 892 -->value<!-- /react-text --></code><!-- react-text: 893 -->。<!-- /react-text --></td><td data-reactid="894"><!-- react-text: 895 -->string<!-- /react-text --></td><td data-reactid="896"><code data-reactid="897"><!-- react-text: 898 -->children<!-- /react-text --></code><!-- react-text: 899 --> （combobox 模式下为 <!-- /react-text --><code data-reactid="900"><!-- react-text: 901 -->value<!-- /react-text --></code><!-- react-text: 902 -->）<!-- /react-text --></td></tr><tr data-reactid="903"><td data-reactid="904"><!-- react-text: 905 -->combobox<!-- /react-text --></td><td data-reactid="906"><!-- react-text: 907 -->输入框自动提示模式<!-- /react-text --></td><td data-reactid="908"><!-- react-text: 909 -->boolean<!-- /react-text --></td><td data-reactid="910"><!-- react-text: 911 -->false<!-- /react-text --></td></tr><tr data-reactid="912"><td data-reactid="913"><!-- react-text: 914 -->size<!-- /react-text --></td><td data-reactid="915"><!-- react-text: 916 -->选择框大小，可选 <!-- /react-text --><code data-reactid="917"><!-- react-text: 918 -->large<!-- /react-text --></code><!-- react-text: 919 --> <!-- /react-text --><code data-reactid="920"><!-- react-text: 921 -->small<!-- /react-text --></code></td><td data-reactid="922"><!-- react-text: 923 -->string<!-- /react-text --></td><td data-reactid="924"><!-- react-text: 925 -->default<!-- /react-text --></td></tr><tr data-reactid="926"><td data-reactid="927"><!-- react-text: 928 -->showSearch<!-- /react-text --></td><td data-reactid="929"><!-- react-text: 930 -->在选择框中显示搜索框<!-- /react-text --></td><td data-reactid="931"><!-- react-text: 932 -->boolean<!-- /react-text --></td><td data-reactid="933"><!-- react-text: 934 -->false<!-- /react-text --></td></tr><tr data-reactid="935"><td data-reactid="936"><!-- react-text: 937 -->disabled<!-- /react-text --></td><td data-reactid="938"><!-- react-text: 939 -->是否禁用<!-- /react-text --></td><td data-reactid="940"><!-- react-text: 941 -->boolean<!-- /react-text --></td><td data-reactid="942"><!-- react-text: 943 -->false<!-- /react-text --></td></tr><tr data-reactid="944"><td data-reactid="945"><!-- react-text: 946 -->defaultActiveFirstOption<!-- /react-text --></td><td data-reactid="947"><!-- react-text: 948 -->是否默认高亮第一个选项。<!-- /react-text --></td><td data-reactid="949"><!-- react-text: 950 -->boolean<!-- /react-text --></td><td data-reactid="951"><!-- react-text: 952 -->true<!-- /react-text --></td></tr><tr data-reactid="953"><td data-reactid="954"><!-- react-text: 955 -->dropdownStyle<!-- /react-text --></td><td data-reactid="956"><!-- react-text: 957 -->下拉菜单的 style 属性<!-- /react-text --></td><td data-reactid="958"><!-- react-text: 959 -->object<!-- /react-text --></td><td data-reactid="960"><!-- react-text: 961 -->-<!-- /react-text --></td></tr><tr data-reactid="962"><td data-reactid="963"><!-- react-text: 964 -->dropdownClassName<!-- /react-text --></td><td data-reactid="965"><!-- react-text: 966 -->下拉菜单的 className 属性<!-- /react-text --></td><td data-reactid="967"><!-- react-text: 968 -->string<!-- /react-text --></td><td data-reactid="969"><!-- react-text: 970 -->-<!-- /react-text --></td></tr><tr data-reactid="971"><td data-reactid="972"><!-- react-text: 973 -->getPopupContainer<!-- /react-text --></td><td data-reactid="974"><!-- react-text: 975 -->菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。<!-- /react-text --><a href="http://codepen.io/anon/pen/xVBOVQ?editors=001" data-reactid="976"><!-- react-text: 977 -->示例<!-- /react-text --></a></td><td data-reactid="978"><!-- react-text: 979 -->Function(triggerNode)<!-- /react-text --></td><td data-reactid="980"><!-- react-text: 981 -->() =&gt; document.body<!-- /react-text --></td></tr><tr data-reactid="982"><td data-reactid="983"><!-- react-text: 984 -->labelInValue<!-- /react-text --></td><td data-reactid="985"><!-- react-text: 986 -->是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 <!-- /react-text --><code data-reactid="987"><!-- react-text: 988 -->string<!-- /react-text --></code><!-- react-text: 989 --> 变为 <!-- /react-text --><code data-reactid="990"><!-- react-text: 991 -->{key: string, label: ReactNode}<!-- /react-text --></code><!-- react-text: 992 --> 的格式<!-- /react-text --></td><td data-reactid="993"><!-- react-text: 994 -->boolean<!-- /react-text --></td><td data-reactid="995"><!-- react-text: 996 -->false<!-- /react-text --></td></tr><tr data-reactid="997"><td data-reactid="998"><!-- react-text: 999 -->tokenSeparators<!-- /react-text --></td><td data-reactid="1000"><!-- react-text: 1001 -->在 tags 和 multiple 模式下自动分词的分隔符<!-- /react-text --></td><td data-reactid="1002"><!-- react-text: 1003 -->string[]<!-- /react-text --></td><td data-reactid="1004"></td></tr></tbody></table><h3 id="Option-props" data-reactid="1005"><span data-reactid="1006"><!-- react-text: 1007 -->Option props<!-- /react-text --></span><a href="#Option-props" class="anchor" data-reactid="1008">#</a></h3><table data-reactid="1009"><thead data-reactid="1010"><tr data-reactid="1011"><th data-reactid="1012"><!-- react-text: 1013 -->参数<!-- /react-text --></th><th data-reactid="1014"><!-- react-text: 1015 -->说明<!-- /react-text --></th><th data-reactid="1016"><!-- react-text: 1017 -->类型<!-- /react-text --></th><th data-reactid="1018"><!-- react-text: 1019 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="1020"><tr data-reactid="1021"><td data-reactid="1022"><!-- react-text: 1023 -->disabled<!-- /react-text --></td><td data-reactid="1024"><!-- react-text: 1025 -->是否禁用<!-- /react-text --></td><td data-reactid="1026"><!-- react-text: 1027 -->boolean<!-- /react-text --></td><td data-reactid="1028"><!-- react-text: 1029 -->false<!-- /react-text --></td></tr><tr data-reactid="1030"><td data-reactid="1031"><!-- react-text: 1032 -->value<!-- /react-text --></td><td data-reactid="1033"><!-- react-text: 1034 -->默认根据此属性值进行筛选<!-- /react-text --></td><td data-reactid="1035"><!-- react-text: 1036 -->string<!-- /react-text --></td><td data-reactid="1037"><!-- react-text: 1038 -->-<!-- /react-text --></td></tr><tr data-reactid="1039"><td data-reactid="1040"><!-- react-text: 1041 -->key<!-- /react-text --></td><td data-reactid="1042"><!-- react-text: 1043 -->和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置<!-- /react-text --></td><td data-reactid="1044"><!-- react-text: 1045 -->string<!-- /react-text --></td><td data-reactid="1046"></td></tr><tr data-reactid="1047"><td data-reactid="1048"><!-- react-text: 1049 -->title<!-- /react-text --></td><td data-reactid="1050"><!-- react-text: 1051 -->选中该 Option 后，Select 的 title<!-- /react-text --></td><td data-reactid="1052"><!-- react-text: 1053 -->string<!-- /react-text --></td><td data-reactid="1054"><!-- react-text: 1055 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="OptGroup-props" data-reactid="1056"><span data-reactid="1057"><!-- react-text: 1058 -->OptGroup props<!-- /react-text --></span><a href="#OptGroup-props" class="anchor" data-reactid="1059">#</a></h3><table data-reactid="1060"><thead data-reactid="1061"><tr data-reactid="1062"><th data-reactid="1063"><!-- react-text: 1064 -->参数<!-- /react-text --></th><th data-reactid="1065"><!-- react-text: 1066 -->说明<!-- /react-text --></th><th data-reactid="1067"><!-- react-text: 1068 -->类型<!-- /react-text --></th><th data-reactid="1069"><!-- react-text: 1070 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="1071"><tr data-reactid="1072"><td data-reactid="1073"><!-- react-text: 1074 -->label<!-- /react-text --></td><td data-reactid="1075"><!-- react-text: 1076 -->组名<!-- /react-text --></td><td data-reactid="1077"><!-- react-text: 1078 -->string<!-- /react-text --><!-- react-text: 1079 -->|<!-- /react-text --><!-- react-text: 1080 -->React.Element<!-- /react-text --></td><td data-reactid="1081"><!-- react-text: 1082 -->无<!-- /react-text --></td></tr><tr data-reactid="1083"><td data-reactid="1084"><!-- react-text: 1085 -->key<!-- /react-text --></td><td data-reactid="1086"></td><td data-reactid="1087"><!-- react-text: 1088 -->string<!-- /react-text --></td><td data-reactid="1089"><!-- react-text: 1090 -->-<!-- /react-text --></td></tr></tbody></table></section></article></div></div><div class="ant-row" data-reactid="1091"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="1092"><section class="prev-next-nav" data-reactid="1093"><a class="prev-page" href="/components/radio-cn/" data-reactid="1094"><span data-reactid="1095">Radio</span><span class="chinese" data-reactid="1096">单选框</span></a><a class="next-page" href="/components/slider-cn/" data-reactid="1097"><span data-reactid="1098">Slider</span><span class="chinese" data-reactid="1099">滑动输入条</span></a></section></div></div></div><footer id="footer" data-reactid="1100"><ul data-reactid="1101"><li data-reactid="1102"><h2 data-reactid="1103"><i class="anticon anticon-github" data-reactid="1104"></i><!-- react-text: 1105 --> GitHub<!-- /react-text --></h2><div data-reactid="1106"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="1107"><span data-reactid="1108">仓库</span></a></div><div data-reactid="1109"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="1110"><span data-reactid="1111">定制主题</span></a></div><div data-reactid="1112"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="1113"><span data-reactid="1114">Awesome Ant Design</span></a></div></li><li data-reactid="1115"><h2 data-reactid="1116"><i class="anticon anticon-link" data-reactid="1117"></i><!-- react-text: 1118 --> <!-- /react-text --><span data-reactid="1119">相关站点</span></h2><div data-reactid="1120"><a href="http://mobile.ant.design" data-reactid="1121">Ant Design Mobile</a><span data-reactid="1122"> - </span><span data-reactid="1123">移动版</span></div><div data-reactid="1124"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="1125">dva</a><!-- react-text: 1126 --> - <!-- /react-text --><span data-reactid="1127">应用框架</span></div><div data-reactid="1128"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="1129">dva-cli</a><!-- react-text: 1130 --> -<!-- /react-text --><span data-reactid="1131">开发工具</span></div><div data-reactid="1132"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="1133">Egg</a><span data-reactid="1134"> - </span><span data-reactid="1135">企业级 Node 开发框架</span></div><div data-reactid="1136"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="1137">AntV</a><span data-reactid="1138"> - </span><span data-reactid="1139">数据可视化</span></div><div data-reactid="1140"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="1141">Ant Motion</a><span data-reactid="1142"> - </span><span data-reactid="1143">设计动效</span></div><div data-reactid="1144"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="1145">AntD Library</a><span data-reactid="1146"> - </span><span data-reactid="1147">Axure 部件库</span></div><div data-reactid="1148"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="1149">Ant UX</a><span data-reactid="1150"> - </span><span data-reactid="1151">页面逻辑素材</span></div></li><li data-reactid="1152"><h2 data-reactid="1153"><i class="anticon anticon-customer-service" data-reactid="1154"></i><!-- react-text: 1155 --> <!-- /react-text --><span data-reactid="1156">社区</span></h2><div data-reactid="1157"><a href="/changelog" data-reactid="1158"><span data-reactid="1159">更新记录</span></a></div><div data-reactid="1160"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="1161"><span data-reactid="1162">常见问题</span></a></div><div data-reactid="1163"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="1164"><span data-reactid="1165">在线讨论</span></a></div><div data-reactid="1166"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="1167"><span data-reactid="1168">报告 Bug</span></a></div><div data-reactid="1169"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="1170"><span data-reactid="1171">StackOverflow</span></a></div><div data-reactid="1172"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="1173"><span data-reactid="1174">SegmentFault</span></a></div></li><li data-reactid="1175"><h2 data-reactid="1176"><!-- react-text: 1177 -->Copyright © <!-- /react-text --><!-- react-text: 1178 -->2017<!-- /react-text --></h2><div data-reactid="1179"><span data-reactid="1180">蚂蚁金服体验技术部出品</span></div><div data-reactid="1181"><!-- react-text: 1182 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="1183">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink