Merge pull request #456 from wenzhixin/feature/386

Added singleRadio option to support hide radio buttons
wenzhixin · Aug 20, 2019 · ea6a9e2 · ea6a9e2
2 parents 9550958 + a342eb3
commit ea6a9e2
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 3 deletions.
diff --git a/docs/_i18n/en/documentation/options.md b/docs/_i18n/en/documentation/options.md
@@ -80,6 +80,16 @@ Option format:
 
 **Example:** <a href="../examples#single-row.html">Single Row</a>
 
+## singleRadio
+
+**Type:** Boolean
+
+**Detail:** Allows you to show the radio input when `single` is set to `true` (from v1.4.0).
+
+**Default:** `false`
+
+**Example:** <a href="../examples#single-radio.html">Single Radio</a>
+
 ## multiple
 
 **Type:** Boolean

diff --git a/docs/_i18n/zh-cn/documentation/options.md b/docs/_i18n/zh-cn/documentation/options.md
@@ -80,6 +80,16 @@ Option 格式：
 
 **例子：** <a href="../examples#single-row.html">Single Row</a>
 
+## singleRadio
+
+**类型：** Boolean
+
+**说明：** 当 `single` 设置为 `true` 的时候允许显示单选框（v1.4.0）。
+
+**默认：** `false`
+
+**例子：** <a href="../examples#single-radio.html">Single Radio</a>
+
 ## multiple
 
 **类型：** Boolean

diff --git a/docs/_includes/example-list.md b/docs/_includes/example-list.md
@@ -12,6 +12,7 @@
 <li><a href="../examples#placeholder.html">The Placeholder</a></li>
 <li><a href="../examples#hide-select-all.html">Hide Select All</a></li>
 <li><a href="../examples#single-row.html">Single Row</a></li>
+<li><a href="../examples#single-radio.html">Single Radio</a></li>
 <li><a href="../examples#multiple-items.html">Multiple Items</a></li>
 <li><a href="../examples#multiple-items-optgroups.html">Multiple Items Optgroups</a></li>
 <li><a href="../examples#hide-optgroup-checkboxes.html">Hide Optgroup Check</a></li>

diff --git a/docs/examples/single-radio.html b/docs/examples/single-radio.html
@@ -0,0 +1,30 @@
+<script>
+  init({
+    title: 'Single Radio',
+    desc: 'Use <code>singleRadio: true</code> to show the radio input.',
+    links: ['multiple-select.css'],
+    scripts: ['multiple-select.js']
+  })
+</script>
+
+<style>
+select {
+  width: 500px;
+}
+</style>
+
+<select multiple="multiple">
+  <option value="1">First</option>
+  <option value="2">Second</option>
+  <option value="3">Third</option>
+  <option value="4" selected="selected">Fourth</option>
+</select>
+
+<script>
+  function mounted() {
+    $('select').multipleSelect({
+      single: true,
+      singleRadio: true
+    })
+  }
+</script>
diff --git a/src/MultipleSelect.js b/src/MultipleSelect.js
@@ -251,9 +251,14 @@ class MultipleSelect {
 
     const customStyle = this.options.styler(row.value)
     const style = customStyle ? sprintf`style="${s}"`(customStyle) : ''
+    let classes = row.classes
+
+    if (this.options.single && !this.options.singleRadio) {
+      classes += ' hide-radio'
+    }
 
     return [
-      sprintf`<li class="${s} ${s}" ${s} ${s}>`(multiple, row.classes || '', title, style),
+      sprintf`<li class="${s} ${s}" ${s} ${s}>`(multiple, classes || '', title, style),
       sprintf`<label class="${s}">`(row.disabled ? 'disabled' : ''),
       sprintf`<input type="${s}" value="${s}" ${s}${s}${s}${s}>`(
         type,
@@ -357,11 +362,12 @@ class MultipleSelect {
         })
       })
     })
+
     this.$selectItems.off('click').on('click', e => {
       const $this = $(e.currentTarget)
 
       if (this.options.single) {
-        const clickedVal = $(e.currentTarget).val()
+        const clickedVal = $this.val()
         this.$selectItems.filter((i, el) => {
           return $(el).val() !== clickedVal
         }).each((i, el) => {
@@ -697,6 +703,7 @@ const defaults = {
 
   selectAll: true,
   single: false,
+  singleRadio: false,
   multiple: false,
   hideOptgroupCheckboxes: false,
   multipleWidth: 80,

diff --git a/src/multiple-select.scss b/src/multiple-select.scss
@@ -145,13 +145,14 @@
   ul {
     overflow: auto;
     margin: 0;
-    padding: 5px 8px;
+    padding: 5px 0;
 
     > li {
       list-style: none;
       display: list-item;
       background-image: none;
       position: static;
+      padding: 0 8px;
 
       .disabled {
         opacity: .35;
@@ -185,6 +186,27 @@
           font-weight: bold;
         }
       }
+
+      &.hide-radio {
+        &:focus,
+        &:hover {
+          background-color: #f8f9fa;
+        }
+
+        &.selected {
+          color: #fff;
+          background-color: #007bff;
+        }
+
+        label {
+          margin-bottom: 0;
+          padding: 5px 0;
+        }
+
+        input {
+          display: none;
+        }
+      }
     }
   }