diff --git a/CHANGE.md b/CHANGE.md
index a36640bc..a1a85e1f 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -41,3 +41,5 @@ MenuItem 和 Submenu 的 key 改为了 name
 Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
 ### Cascader
 Caspanel 的 sublist 从 prop -> data
+### Select
+model 改为 value，支持 v-model
\ No newline at end of file
diff --git a/README.md b/README.md
index 0e707fad..d070cb24 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@
 - [x] Checkbox
 - [x] Switch
 - [ ] Table
-- [ ] Select
+- [x] Select
 - [x] Slider
 - [ ] DatePicker
 - [ ] TimePicker
diff --git a/examples/app.vue b/examples/app.vue
index 0f3fa758..f51ad5a7 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -43,6 +43,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/menu">Menu</router-link></li>
                 <li><router-link to="/spin">Spin</router-link></li>
                 <li><router-link to="/cascader">Cascader</router-link></li>
+                <li><router-link to="/select">Select</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index c3b505ea..db866cc3 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -136,6 +136,10 @@ const router = new VueRouter({
         {
             path: '/cascader',
             component: require('./routers/cascader.vue')
+        },
+        {
+            path: '/select',
+            component: require('./routers/select.vue')
         }
     ]
 });
diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index e774cb0f..96ae0eca 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -1,70 +1,246 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--<i-select v-model="model1" style="width:200px" clearable>-->
+            <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <!--</i-select>-->
+        <!--{{ model1 }}-->
+        <!--<div @click="c">change</div>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--cityList: [-->
+                    <!--{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shanghai',-->
+                        <!--label: '上海市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shenzhen',-->
+                        <!--label: '深圳市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'hangzhou',-->
+                        <!--label: '杭州市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'nanjing',-->
+                        <!--label: '南京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'chongqing',-->
+                        <!--label: '重庆市'-->
+                    <!--}-->
+                <!--],-->
+                <!--model1: ''-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--c () {-->
+                <!--this.model1 = 'hangzhou'-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<i-select v-model="model5" disabled style="width:200px">-->
+            <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <!--</i-select>-->
+        <!--<i-select v-model="model6" style="width:200px">-->
+            <!--<i-option value="beijing">北京市</i-option>-->
+            <!--<i-option value="shanghai" disabled>上海市</i-option>-->
+            <!--<i-option value="shenzhen">深圳市</i-option>-->
+        <!--</i-select>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--cityList: [-->
+                    <!--{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shanghai',-->
+                        <!--label: '上海市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shenzhen',-->
+                        <!--label: '深圳市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'hangzhou',-->
+                        <!--label: '杭州市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'nanjing',-->
+                        <!--label: '南京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'chongqing',-->
+                        <!--label: '重庆市'-->
+                    <!--}-->
+                <!--],-->
+                <!--model5: '',-->
+                <!--model6: ''-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<i-select v-model="model7" style="width:200px">-->
+            <!--<Option-group label="热门城市">-->
+                <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+            <!--</Option-group>-->
+            <!--<Option-group label="其它城市">-->
+                <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+            <!--</Option-group>-->
+        <!--</i-select>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--cityList: [-->
+                    <!--{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shanghai',-->
+                        <!--label: '上海市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shenzhen',-->
+                        <!--label: '深圳市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'hangzhou',-->
+                        <!--label: '杭州市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'nanjing',-->
+                        <!--label: '南京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'chongqing',-->
+                        <!--label: '重庆市'-->
+                    <!--}-->
+                <!--],-->
+                <!--model7: ''-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<i-select v-model="model10" multiple style="width:260px">-->
+            <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <!--</i-select>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--cityList: [-->
+                    <!--{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shanghai',-->
+                        <!--label: '上海市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shenzhen',-->
+                        <!--label: '深圳市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'hangzhou',-->
+                        <!--label: '杭州市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'nanjing',-->
+                        <!--label: '南京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'chongqing',-->
+                        <!--label: '重庆市'-->
+                    <!--}-->
+                <!--],-->
+                <!--model10: []-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
 <template>
-    <Row>
-        <i-col span="12" style="padding-right:10px">
-            <i-select :model.sync="model111" filterable>
-                <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
-            </i-select>
-        </i-col>
-    </Row>
-    <Row>
-        <i-col span="12" style="padding-right:10px">
-            <i-select :model.sync="model112" filterable>
-                <i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
-            </i-select>
-        </i-col>
-    </Row>
-    <Row>
-        <i-col span="12">
-            <i-select :model.sync="model12" filterable multiple>
-                <i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
-            </i-select>
-        </i-col>
-    </Row>
+    <div>
+        <Row>
+            <i-col span="12" style="padding-right:10px">
+                <i-select v-model="model11" filterable>
+                    <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+                </i-select>
+            </i-col>
+            <i-col span="12">
+                <i-select v-model="model12" filterable multiple>
+                    <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+                </i-select>
+            </i-col>
+        </Row>
+        <div @click="model11 = 'shanghai'">change</div>
+    </div>
 </template>
 <script>
-const cityList = [
-    {
-        value: 'beijing',
-        label: '北京市'
-    },
-    {
-        value: 'shanghai',
-        label: '上海市'
-    },
-    {
-        value: 'shenzhen',
-        label: '深圳市'
-    },
-    {
-        value: 'hangzhou',
-        label: '杭州市'
-    },
-    {
-        value: 'nanjing',
-        label: '南京市'
-    },
-    {
-        value: 'chongqing',
-        label: '重庆市'
-    }
-]
     export default {
         data () {
             return {
-                cityList1: cityList,
-                model111: '',
-
-                cityList2: [],
-                model112: 'beijing',
-
+                cityList: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ],
+                model11: '',
                 model12: []
             }
-        },
-        ready() {
-          this.model111 = 'hangzhou'
-          setTimeout(()=>{
-            this.cityList2 = cityList
-          }, 500)
         }
     }
 </script>
diff --git a/src/components/select/option-group.vue b/src/components/select/option-group.vue
index ee5a3a28..6dd245ac 100644
--- a/src/components/select/option-group.vue
+++ b/src/components/select/option-group.vue
@@ -2,7 +2,7 @@
     <li :class="[prefixCls + '-wrap']" v-show="!hidden">
         <div :class="[prefixCls + '-title']">{{ label }}</div>
         <ul>
-            <li :class="[prefixCls]" v-el:options><slot></slot></li>
+            <li :class="[prefixCls]" ref="options"><slot></slot></li>
         </ul>
     </li>
 </template>
@@ -10,6 +10,7 @@
     const prefixCls = 'ivu-select-group';
 
     export default {
+        name: 'OptionGroup',
         props: {
             label: {
                 type: String,
@@ -25,7 +26,7 @@
         methods: {
             queryChange () {
                 this.$nextTick(() => {
-                    const options = this.$els.options.querySelectorAll('.ivu-select-item');
+                    const options = this.$refs.options.querySelectorAll('.ivu-select-item');
                     let hasVisibleOption = false;
                     for (let i = 0; i < options.length; i++) {
                         if (options[i].style.display !== 'none') {
@@ -37,11 +38,11 @@
                 });
             }
         },
-        events: {
-            'on-query-change' () {
+        mounted () {
+            this.$on('on-query-change', () => {
                 this.queryChange();
                 return true;
-            }
+            });
         }
     };
 </script>
diff --git a/src/components/select/option.vue b/src/components/select/option.vue
index 471f6a59..bef7dbf3 100644
--- a/src/components/select/option.vue
+++ b/src/components/select/option.vue
@@ -2,9 +2,14 @@
     <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
 </template>
 <script>
+    import Emitter from '../../mixins/emitter';
+
     const prefixCls = 'ivu-select-item';
 
     export default {
+        name: 'iOption',
+        componentName: 'select-item',
+        mixins: [ Emitter ],
         props: {
             value: {
                 type: [String, Number],
@@ -18,7 +23,6 @@
                 default: false
             }
         },
-        componentName: 'select-item',
         data () {
             return {
                 selected: false,
@@ -49,7 +53,7 @@
                     return false;
                 }
 
-                this.$dispatch('on-select-selected', this.value);
+                this.dispatch('iSelect', 'on-select-selected', this.value);
             },
             blur () {
                 this.isFocus = false;
@@ -59,16 +63,14 @@
                 this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
             }
         },
-        compiled () {
+        mounted () {
             this.searchLabel = this.$el.innerHTML;
-        },
-        events: {
-            'on-select-close' () {
+            this.$on('on-select-close', () => {
                 this.isFocus = false;
-            },
-            'on-query-change' (val) {
+            });
+            this.$on('on-query-change', (val) => {
                 this.queryChange(val);
-            }
+            });
         }
     };
 </script>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 297c18f3..f1184ce8 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -2,11 +2,11 @@
     <div :class="classes" v-clickoutside="handleClose">
         <div
             :class="[prefixCls + '-selection']"
-            v-el:reference
+            ref="reference"
             @click="toggleMenu">
-            <div class="ivu-tag" v-for="item in selectedMultiple">
+            <div class="ivu-tag" v-for="(item, index) in selectedMultiple">
                 <span class="ivu-tag-text">{{ item.label }}</span>
-                <Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon>
+                <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
             </div>
             <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
             <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
@@ -20,31 +20,35 @@
                 @blur="handleBlur"
                 @keydown="resetInputState"
                 @keydown.delete="handleInputDelete"
-                v-el:input>
-            <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
+                ref="input">
+            <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
             <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
         </div>
-        <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
-            <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
-            <ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
-        </Dropdown>
+        <transition name="slide-up">
+            <Drop v-show="visible" ref="dropdown">
+                <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
+                <ul v-show="!notFound" :class="[prefixCls + '-dropdown-list']" ref="options"><slot></slot></ul>
+            </Drop>
+        </transition>
     </div>
 </template>
 <script>
     import Icon from '../icon';
-    import Dropdown from './dropdown.vue';
+    import Drop from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf, MutationObserver } from '../../utils/assist';
     import { t } from '../../locale';
+    import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-select';
 
     export default {
         name: 'iSelect',
-        components: { Icon, Dropdown },
+        mixins: [ Emitter ],
+        components: { Icon, Drop },
         directives: { clickoutside },
         props: {
-            model: {
+            value: {
                 type: [String, Number, Array],
                 default: ''
             },
@@ -101,7 +105,8 @@
                 query: '',
                 inputLength: 20,
                 notFound: false,
-                slotChangeDuration: false    // if slot change duration and in multiple, set true and after slot change, set false
+                slotChangeDuration: false,    // if slot change duration and in multiple, set true and after slot change, set false
+                model: this.value
             };
         },
         computed: {
@@ -161,7 +166,7 @@
             hideMenu () {
                 this.visible = false;
                 this.focusIndex = 0;
-                this.$broadcast('on-select-close');
+                this.broadcast('iOption', 'on-select-close');
             },
             // find option component
             findChild (cb) {
@@ -289,10 +294,10 @@
                 this.model.splice(index, 1);
 
                 if (this.filterable && this.visible) {
-                    this.$els.input.focus();
+                    this.$refs.input.focus();
                 }
 
-                this.$broadcast('on-update-popper');
+                this.broadcast('Drop', 'on-update-popper');
             },
             // to select option for single
             toggleSingleSelected (value, init = false) {
@@ -316,13 +321,15 @@
                                 value: value,
                                 label: label
                             });
-                            this.$dispatch('on-form-change', {
-                                value: value,
-                                label: label
-                            });
+                            // todo 事件
+//                            this.$dispatch('on-form-change', {
+//                                value: value,
+//                                label: label
+//                            });
                         } else {
                             this.$emit('on-change', value);
-                            this.$dispatch('on-form-change', value);
+                            // todo 事件
+//                            this.$dispatch('on-form-change', value);
                         }
                     }
                 }
@@ -351,10 +358,12 @@
                     if (!init) {
                         if (this.labelInValue) {
                             this.$emit('on-change', hybridValue);
-                            this.$dispatch('on-form-change', hybridValue);
-                        } else {
+                            // todo 事件
+//                            this.$dispatch('on-form-change', hybridValue);
+//                        } else {
                             this.$emit('on-change', value);
-                            this.$dispatch('on-form-change', value);
+                            // todo 事件
+//                            this.$dispatch('on-form-change', value);
                         }
                     }
                 }
@@ -463,7 +472,7 @@
                 }, 300);
             },
             resetInputState () {
-                this.inputLength = this.$els.input.value.length * 12 + 20;
+                this.inputLength = this.$refs.input.value.length * 12 + 20;
             },
             handleInputDelete () {
                 if (this.multiple && this.model.length && this.query === '') {
@@ -495,7 +504,7 @@
                 }
             }
         },
-        compiled () {
+        mounted () {
             this.modelToQuery();
 
             this.updateOptions(true);
@@ -509,13 +518,44 @@
                     this.updateOptions(true, true);
                 });
 
-                this.observer.observe(this.$els.options, {
+                this.observer.observe(this.$refs.options, {
 //                attributes: true,
                     childList: true,
                     characterData: true,
                     subtree: true
                 });
             }
+
+            this.$on('on-select-selected', (value) => {
+                if (this.model === value) {
+                    this.hideMenu();
+                } else {
+                    if (this.multiple) {
+                        const index = this.model.indexOf(value);
+                        if (index >= 0) {
+                            this.removeTag(index);
+                        } else {
+                            this.model.push(value);
+                            this.broadcast('Drop', 'on-update-popper');
+                        }
+
+                        if (this.filterable) {
+                            this.query = '';
+                            this.$refs.input.focus();
+                        }
+                    } else {
+                        this.model = value;
+
+                        if (this.filterable) {
+                            this.findChild((child) => {
+                                if (child.value === value) {
+                                    this.query = child.label === undefined ? child.searchLabel : child.label;
+                                }
+                            });
+                        }
+                    }
+                }
+            });
         },
         beforeDestroy () {
             document.removeEventListener('keydown', this.handleKeydown);
@@ -524,7 +564,11 @@
             }
         },
         watch: {
+            value (val) {
+                this.model = val;
+            },
             model () {
+                this.$emit('input', this.model);
                 this.modelToQuery();
                 if (this.multiple) {
                     if (this.slotChangeDuration) {
@@ -539,18 +583,20 @@
             visible (val) {
                 if (val) {
                     if (this.multiple && this.filterable) {
-                        this.$els.input.focus();
+                        this.$refs.input.focus();
                     }
-                    this.$broadcast('on-update-popper');
+                    this.broadcast('Drop', 'on-update-popper');
                 } else {
                     if (this.filterable) {
-                        this.$els.input.blur();
+                        this.$refs.input.blur();
                     }
-                    this.$broadcast('on-destroy-popper');
+                    this.broadcast('Drop', 'on-destroy-popper');
                 }
             },
             query (val) {
-                this.$broadcast('on-query-change', val);
+                // todo 这里会重复
+                this.broadcast('OptionGroup', 'on-query-change', val);
+                this.broadcast('iOption', 'on-query-change', val);
                 let is_hidden = true;
 
                 this.$nextTick(() => {
@@ -561,39 +607,7 @@
                     });
                     this.notFound = is_hidden;
                 });
-                this.$broadcast('on-update-popper');
-            }
-        },
-        events: {
-            'on-select-selected' (value) {
-                if (this.model === value) {
-                    this.hideMenu();
-                } else {
-                    if (this.multiple) {
-                        const index = this.model.indexOf(value);
-                        if (index >= 0) {
-                            this.removeTag(index);
-                        } else {
-                            this.model.push(value);
-                            this.$broadcast('on-update-popper');
-                        }
-
-                        if (this.filterable) {
-                            this.query = '';
-                            this.$els.input.focus();
-                        }
-                    } else {
-                        this.model = value;
-
-                        if (this.filterable) {
-                            this.findChild((child) => {
-                                if (child.value === value) {
-                                    this.query = child.label === undefined ? child.searchLabel : child.label;
-                                }
-                            });
-                        }
-                    }
-                }
+                this.broadcast('Drop', 'on-update-popper');
             }
         }
     };
diff --git a/src/index.js b/src/index.js
index eec82f89..26c0bb7b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,7 +43,7 @@ import Tooltip from './components/tooltip';
 import Tree from './components/tree';
 import Upload from './components/upload';
 import { Row, Col } from './components/grid';
-// import { Select, Option, OptionGroup } from './components/select';
+import { Select, Option, OptionGroup } from './components/select';
 import locale from './locale';
 
 const iview = {
@@ -83,8 +83,8 @@ const iview = {
     // Message,
     // Modal,
     // Notice,
-    // iOption: Option,
-    // OptionGroup,
+    iOption: Option,
+    OptionGroup,
     // Page,
     Panel: Collapse.Panel,
     Poptip,
@@ -93,7 +93,7 @@ const iview = {
     RadioGroup: Radio.Group,
     Rate,
     Row,
-    // iSelect: Select,
+    iSelect: Select,
     Slider,
     Spin,
     Step: Steps.Step,