deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-03 14:23:12 +02:00
Code Issues Projects Releases Wiki Activity

Add example in index.html + refactoring

Browse source
This commit is contained in:
alexandre.baillif@kosmos.fr 2017-03-01 15:00:22 +01:00
parent b8979563ab
commit 8c6fbdd97a
3 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/choices.js.map vendored
View file

File diff suppressed because one or more lines are too long

6
assets/scripts/src/choices.js
View file

@ -1915,14 +1915,14 @@ class Choices {
triggerEvent(this.passedElement, 'addItem', {
id,
value: passedValue,
label: passedLabel,
label: passedLabel,
groupValue: group.value,
});
} else {
triggerEvent(this.passedElement, 'addItem', {
id,
value: passedValue,
label: passedLabel,
label: passedLabel,
});
}
@ -1962,7 +1962,7 @@ class Choices {
triggerEvent(this.passedElement, 'removeItem', {
id,
value,
label,
label,
});
}

29
index.html
View file

@ -256,6 +256,11 @@
<option value="Queens">Queens</option>
<option value="Staten Island">Staten Island</option>
</select>
<label for="label-event">Use label in event (add/remove)</label>
<select id="choices-select" multiple></select>
<p id="message"></p>
</div>
</div>
<script>
@ -451,6 +456,30 @@
});
var boroughs = new Choices(document.getElementById('boroughs')).disable();
/* Use label on event */
var choicesSelect = new Choices('#choices-select', {
search: false,
removeItemButton: true,
choices: [
{value: 'One', label: 'Label One'},
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
}).setChoices([
{value: 'Four', label: 'Label Four', disabled: true},
{value: 'Five', label: 'Label Five'},
{value: 'Six', label: 'Label Six', selected: true},
], 'value', 'label', false);
function useLabelOnAddItem (event) {
document.getElementById('message').innerHTML = 'You just added ' + event.detail.label;
};
function useLabelOnRemoveItem (event) {
document.getElementById('message').innerHTML = 'You just removed ' + event.detail.label;
};
choicesSelect.passedElement.addEventListener('addItem',useLabelOnAddItem);
choicesSelect.passedElement.addEventListener('removeItem',useLabelOnRemoveItem);
/* End of use label on event*/
});
</script>