Skip to content

Commit 3304065

Browse files
ibnujakariaibnujakaria
committed
handled disabled option #3 
1 parent e0f8582 commit 3304065

File tree

12 files changed

+70
-15
lines changed

12 files changed

+70
-15
lines changed

‎dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>Multiple Select</title> <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css> <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css> <link href="css/multiple-select.css" rel="stylesheet"></head> <body> <section> <div class="container mt-5"> <h1>Multiple Select</h1> <hr> <form> <div class=form-group> <label for=select-language>Normal Select</label> <select class=form-control> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=java>Java</option> </select> </div> <div class=form-group> <label for=select-language>Single Select</label> <select id=select-language> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=java>Java</option> </select> </div> <div class=form-group> <label for=select-language>Multiple Select</label> <select id=select-multiple-language multiple=multiple> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=java>Java</option> </select> </div> </form> </div> </section> <script type="text/javascript" src="js/multiple-select.js"></script><script type="text/javascript" src="js/app.js"></script></body> </html>
1+
<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>Multiple Select</title> <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css> <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css> <link href="css/multiple-select.css" rel="stylesheet"></head> <body> <section> <div class="container mt-5"> <h1>Multiple Select</h1> <hr> <form> <div class=form-group> <label for=select-language>Normal Select</label> <select class=form-control> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=java>Java</option> </select> </div> <div class=form-group> <label for=select-language>Single Select</label> <select id=select-language> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=java>Java</option> </select> </div> <div class=form-group> <label for=select-language>Multiple Select</label> <select id=select-multiple-language multiple=multiple> <option value=php>PHP</option> <option value=javascript>Javascript</option> <option value=python>Python</option> <option value=kotlin disabled=disabled>Kotlin</option> <option value=java>Java</option> </select> </div> </form> </div> </section> <script type="text/javascript" src="js/multiple-select.js"></script><script type="text/javascript" src="js/app.js"></script></body> </html>

‎dist/js/app.js‎

Lines changed: 22 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/app.js.gz‎

106 Bytes
Binary file not shown.

‎dist/js/app.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/app.js.map.gz‎

120 Bytes
Binary file not shown.

‎dist/js/multiple-select.js‎

Lines changed: 22 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/multiple-select.js.gz‎

103 Bytes
Binary file not shown.

‎dist/js/multiple-select.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/multiple-select.js.map.gz‎

118 Bytes
Binary file not shown.

‎src/MultipleSelect.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import './scss/multiple-select.scss'
55
var selectMultipleContainerId = 0
66

77
class MultipleSelect {
8-
98

109
constructor(elId, options) {
1110
selectMultipleContainerId++
@@ -49,6 +48,14 @@ class MultipleSelect {
4948
observer.observe(this.$el, { attributes: true, childList: true });
5049
}
5150

51+
/**
52+
* Creating `<div>` for root element right after the `<select>` element.
53+
* And then hide the `<select>` element.
54+
*
55+
* @param {*} elId
56+
* @returns {*}
57+
* @memberof MultipleSelect
58+
*/
5259
_buildRootElement (elId) {
5360
let select = document.querySelector(elId)
5461
let root = document.createElement('div')
@@ -58,8 +65,12 @@ class MultipleSelect {
5865
root.setAttribute('id', `multiple-select-container-${selectMultipleContainerId}`)
5966
root.style.position = 'relative'
6067

61-
select.querySelectorAll('option:not([disabled])').forEach(option => {
62-
items.push({ value: option.value, label: option.innerText })
68+
select.querySelectorAll('option').forEach(option => {
69+
items.push({
70+
value: option.value,
71+
label: option.innerText,
72+
disabled: option.disabled
73+
})
6374
})
6475

6576
// get the already selected items

0 commit comments

Comments
 (0)