deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-21 06:56:34 +02:00
Code Issues Projects Releases Wiki Activity

Set placeholders on select box

Browse source
This commit is contained in:
Josh Johnson 2016-04-15 09:19:02 +01:00
parent 818450dfa5
commit fc0a72d2a2
3 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -13,7 +13,6 @@ import { hasClass, wrap, getSiblings, isType, strToEl, extend } from './lib/util
* - Dispatch events
* - Remove item by clicking a target
* - Set input width based on the size of the contents
* - Map options to items
* - Single select input support
* - Populate options by function
*/
@ -45,7 +44,8 @@ export class Choices {
allowPaste: true,
regexFilter: false,
debug: false,
placeholder: false,
placeholder: true,
placeholderValue: '',
prependValue: false,
appendValue: false,
selectAll: true,
@ -586,8 +586,13 @@ export class Choices {
let list = strToEl(`<ul class="${ this.options.classNames.list } ${ this.options.classNames.listItems }"></ul>`);
let input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
if (this.passedElement.placeholder) {
input.placeholder = this.passedElement.placeholder;
// If placeholder has been enabled
if (this.options.placeholder) {
// ...and we have a value to set
const placeholderValue = this.options.placeholderValue || this.passedElement.placeholder;
if(placeholderValue) {
input.placeholder = placeholderValue;
}
}
if(!this.options.addItems) {
@ -643,8 +648,9 @@ export class Choices {
const input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
const dropdown = strToEl(`<div class="${ this.options.classNames.list } ${ this.options.classNames.listDropdown }"></div>`);
if (input.placeholder) {
input.placeholder = this.passedElement.placeholder;
// If placeholder has been enabled and we have a value
if (this.options.placeholder && this.options.placeholderValue) {
input.placeholder = this.options.placeholderValue;
}
if(!this.options.addItems) {
@ -882,6 +888,7 @@ document.addEventListener('DOMContentLoaded', () => {
});
const choicesMultiple = new Choices('[data-choice]', {
placeholderValue: 'This is a placeholder set in the config',
callbackOnRender: function(items, options) {
console.log(items);
},

21
index.html
View file

@ -43,12 +43,31 @@
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
<label for="choices-9">Select box</label>
<label for="choices-9">Select box with pre-selected option</label>
<select id="choices-9" name="choices-9" data-choice placeholder="This is a placeholder" multiple>
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2" selected>Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
<label for="choices-10">Select box with pre-selected option</label>
<select id="choices-10" name="choices-10" data-choice placeholder="This is a placeholder" multiple>
<optgroup label="Group 1">
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Dropdown item 5">Dropdown item 5</option>
<option value="Dropdown item 6">Dropdown item 6</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option value="Dropdown item 4">Dropdown item 7</option>
<option value="Dropdown item 5">Dropdown item 8</option>
<option value="Dropdown item 6">Dropdown item 9</option>
</optgroup>
</select>
</div>
</div>
</body>