FIX: add option's value into item as _value, and when selectItem or c…

…learSelection, autochange the original select form element's value
mycolorway · Dec 25, 2014 · f21fe0b · f21fe0b
1 parent 3dce036
commit f21fe0b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/demo.html b/demo.html
@@ -72,9 +72,9 @@
         <div class="demo-one">
             <h3>Demo one</h3>
             <select id="select-one">
-                <option data-key="George Washington">George Washington</option>
-                <option data-key="John Adams">John Adams</option>
-                <option data-key="Thomas Jefferson">Thomas Jefferson</option>
+                <option value="0" data-key="George Washington">George Washington</option>
+                <option value="1" data-key="John Adams">John Adams</option>
+                <option value="2" data-key="Thomas Jefferson">Thomas Jefferson</option>
             </select>
         </div>
 

diff --git a/lib/select.js b/lib/select.js
@@ -83,7 +83,8 @@ Select = (function(_super) {
     } else {
       items = this.el.find("option").map(function() {
         return $.extend({
-          label: $(this).text().trim()
+          label: $(this).text().trim(),
+          _value: $(this).attr('value')
         }, $(this).data());
       }).get();
     }
@@ -357,6 +358,7 @@ Select = (function(_super) {
       this.input.val(item.label).removeClass("expanded error");
       this.list.hide().find(".select-item").eq(index).addClass("selected");
       this._selectedIndex = index;
+      this.el.val(item._value);
       this.trigger("select", [item]);
     }
     if (this._selectedIndex > -1) {
@@ -369,6 +371,7 @@ Select = (function(_super) {
     this.select.removeClass("selected");
     this.list.hide().find(".select-item").show().removeClass("selected");
     this._selectedIndex = -1;
+    this.el.val('');
     return this.trigger("clear");
   };
 
@@ -395,9 +398,7 @@ select = function(opts) {
   return new Select(opts);
 };
 
-
 return select;
 
-
 }));
 
diff --git a/spec/select-spec.coffee b/spec/select-spec.coffee
@@ -1,8 +1,8 @@
 selectEl = $("""
   <select id="select-one">
-    <option data-key="George Washington">George Washington</option>
-    <option data-key="John Adams">John Adams</option>
-    <option data-key="Thomas Jefferson">Thomas Jefferson</option>
+    <option value="0" data-key="George Washington">George Washington</option>
+    <option value="1" data-key="John Adams">John Adams</option>
+    <option value="2" data-key="Thomas Jefferson">Thomas Jefferson</option>
   </select>
   """)
 
@@ -50,6 +50,16 @@ describe 'Simple Select', ->
       done()
     , 10
 
+  it "should set original select form element value according to select item", ->
+    selectEl.appendTo("body")
+    select = simple.select
+      el: $("#select-one")
+
+    select.selectItem(1)
+    expect(select.el.val()).toBe('1')
+    select.clearSelection()
+    expect(select.el.val()).toBe(null)
+
   it "should see 'select-list' if click 'link-expand'", ->
     selectEl.appendTo("body")
     select = simple.select

diff --git a/spec/select-spec.js b/spec/select-spec.js
@@ -1,7 +1,7 @@
 (function() {
   var selectEl;
 
-  selectEl = $("<select id=\"select-one\">\n  <option data-key=\"George Washington\">George Washington</option>\n  <option data-key=\"John Adams\">John Adams</option>\n  <option data-key=\"Thomas Jefferson\">Thomas Jefferson</option>\n</select>");
+  selectEl = $("<select id=\"select-one\">\n  <option value=\"0\" data-key=\"George Washington\">George Washington</option>\n  <option value=\"1\" data-key=\"John Adams\">John Adams</option>\n  <option value=\"2\" data-key=\"Thomas Jefferson\">Thomas Jefferson</option>\n</select>");
 
   afterEach(function() {
     $(".simple-select").each(function() {
@@ -52,6 +52,17 @@
         return done();
       }, 10);
     });
+    it("should set original select form element value according to select item", function() {
+      var select;
+      selectEl.appendTo("body");
+      select = simple.select({
+        el: $("#select-one")
+      });
+      select.selectItem(1);
+      expect(select.el.val()).toBe('1');
+      select.clearSelection();
+      return expect(select.el.val()).toBe(null);
+    });
     it("should see 'select-list' if click 'link-expand'", function() {
       var select;
       selectEl.appendTo("body");

diff --git a/src/select.coffee b/src/select.coffee
@@ -70,6 +70,7 @@ class Select extends SimpleModule
       items = @el.find("option").map ->
         return $.extend
           label: $(@).text().trim()
+          _value: $(@).attr 'value'
         , $(@).data()
       .get()
 
@@ -274,6 +275,7 @@ class Select extends SimpleModule
         .addClass "selected"
 
       @_selectedIndex = index
+      @el.val item._value
       @trigger "select", [item]
 
     return @items[@_selectedIndex] if @_selectedIndex > -1
@@ -288,6 +290,7 @@ class Select extends SimpleModule
       .removeClass "selected"
 
     @_selectedIndex = -1
+    @el.val ''
     @trigger "clear"