Support select multiple binding (fix #4755) (#4756)

* support select multiple binding

* improve select onchange handle

* update  style

src/platforms/web/compiler/directives/model.js

@@ -163,13 +163,14 @@ function genSelect (
   }
 
   const number = modifiers && modifiers.number
-  const assignment = `Array.prototype.filter` +
+  const selectedVal = `Array.prototype.filter` +
     `.call($event.target.options,function(o){return o.selected})` +
     `.map(function(o){var val = "_value" in o ? o._value : o.value;` +
-    `return ${number ? '_n(val)' : 'val'}})` +
+    `return ${number ? '_n(val)' : 'val'}})`
-    (el.attrsMap.multiple == null ? '[0]' : '')
 
-  const code = genAssignmentCode(value, assignment)
+  const assignment = '$event.target.multiple ? $$selectedVal : $$selectedVal[0]'
+  let code = `var $$selectedVal = ${selectedVal};`
+  code = `${code} ${genAssignmentCode(value, assignment)}`
   addHandler(el, 'change', code, null, true)
 }
 

test/unit/features/directives/model-select.spec.js

@@ -262,6 +262,31 @@ describe('Directive v-model select', () => {
     })
   }
 
+  it('should work with multiple binding', (done) => {
+    const spy = jasmine.createSpy()
+    const vm = new Vue({
+      data: {
+        isMultiple: true,
+        selections: ['1']
+      },
+      template:
+        '<select v-model="selections" :multiple="isMultiple">' +
+          '<option value="1">item 1</option>' +
+          '<option value="2">item 2</option>' +
+        '</select>',
+      watch: {
+        selections: spy
+      }
+    }).$mount()
+    document.body.appendChild(vm.$el)
+    vm.$el.options[1].selected = true
+    triggerEvent(vm.$el, 'change')
+    waitForUpdate(() => {
+      expect(spy).toHaveBeenCalled()
+      expect(vm.selections).toEqual(['1', '2'])
+    }).then(done)
+  })
+
   it('multiple with static template', () => {
     const vm = new Vue({
       template: