mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Set placeholders on select box
This commit is contained in:
parent
818450dfa5
commit
fc0a72d2a2
2
assets/scripts/dist/bundle.js
vendored
2
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -13,7 +13,6 @@ import { hasClass, wrap, getSiblings, isType, strToEl, extend } from './lib/util
|
||||||
* - Dispatch events
|
* - Dispatch events
|
||||||
* - Remove item by clicking a target
|
* - Remove item by clicking a target
|
||||||
* - Set input width based on the size of the contents
|
* - Set input width based on the size of the contents
|
||||||
* - Map options to items
|
|
||||||
* - Single select input support
|
* - Single select input support
|
||||||
* - Populate options by function
|
* - Populate options by function
|
||||||
*/
|
*/
|
||||||
|
@ -45,7 +44,8 @@ export class Choices {
|
||||||
allowPaste: true,
|
allowPaste: true,
|
||||||
regexFilter: false,
|
regexFilter: false,
|
||||||
debug: false,
|
debug: false,
|
||||||
placeholder: false,
|
placeholder: true,
|
||||||
|
placeholderValue: '',
|
||||||
prependValue: false,
|
prependValue: false,
|
||||||
appendValue: false,
|
appendValue: false,
|
||||||
selectAll: true,
|
selectAll: true,
|
||||||
|
@ -586,8 +586,13 @@ export class Choices {
|
||||||
let list = strToEl(`<ul class="${ this.options.classNames.list } ${ this.options.classNames.listItems }"></ul>`);
|
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 }">`);
|
let input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
|
||||||
|
|
||||||
if (this.passedElement.placeholder) {
|
// If placeholder has been enabled
|
||||||
input.placeholder = this.passedElement.placeholder;
|
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) {
|
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 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>`);
|
const dropdown = strToEl(`<div class="${ this.options.classNames.list } ${ this.options.classNames.listDropdown }"></div>`);
|
||||||
|
|
||||||
if (input.placeholder) {
|
// If placeholder has been enabled and we have a value
|
||||||
input.placeholder = this.passedElement.placeholder;
|
if (this.options.placeholder && this.options.placeholderValue) {
|
||||||
|
input.placeholder = this.options.placeholderValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!this.options.addItems) {
|
if(!this.options.addItems) {
|
||||||
|
@ -882,6 +888,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const choicesMultiple = new Choices('[data-choice]', {
|
const choicesMultiple = new Choices('[data-choice]', {
|
||||||
|
placeholderValue: 'This is a placeholder set in the config',
|
||||||
callbackOnRender: function(items, options) {
|
callbackOnRender: function(items, options) {
|
||||||
console.log(items);
|
console.log(items);
|
||||||
},
|
},
|
||||||
|
|
21
index.html
21
index.html
|
@ -43,12 +43,31 @@
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
</select>
|
</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>
|
<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 1">Dropdown item 1</option>
|
||||||
<option value="Dropdown item 2" selected>Dropdown item 2</option>
|
<option value="Dropdown item 2" selected>Dropdown item 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
</select>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue