mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-23 16:02:21 +02:00
Update choice value/labels + add test for parent/child link
This commit is contained in:
parent
dad2b345cd
commit
d5437413a4
|
@ -13,7 +13,7 @@ describe('Choices - select multiple', () => {
|
||||||
|
|
||||||
describe('selecting choices', () => {
|
describe('selecting choices', () => {
|
||||||
describe('focusing on text input', () => {
|
describe('focusing on text input', () => {
|
||||||
const selectedChoiceText = 'Dropdown item 1';
|
const selectedChoiceText = 'Choice 1';
|
||||||
|
|
||||||
it('displays a dropdown of choices', () => {
|
it('displays a dropdown of choices', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
|
@ -26,7 +26,7 @@ describe('Choices - select multiple', () => {
|
||||||
.should('have.length', 4)
|
.should('have.length', 4)
|
||||||
.each(($choice, index) => {
|
.each(($choice, index) => {
|
||||||
expect($choice.text().trim()).to.equal(
|
expect($choice.text().trim()).to.equal(
|
||||||
`Dropdown item ${index + 1}`,
|
`Choice ${index + 1}`,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -151,7 +151,7 @@ describe('Choices - select multiple', () => {
|
||||||
.children()
|
.children()
|
||||||
.first()
|
.first()
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 2');
|
expect($choice.text().trim()).to.equal('Choice 2');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -167,7 +167,7 @@ describe('Choices - select multiple', () => {
|
||||||
.children()
|
.children()
|
||||||
.first()
|
.first()
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 3');
|
expect($choice.text().trim()).to.equal('Choice 3');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -424,7 +424,7 @@ describe('Choices - select multiple', () => {
|
||||||
|
|
||||||
describe('search floor reached', () => {
|
describe('search floor reached', () => {
|
||||||
it('displays choices filtered by inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
const searchTerm = 'Dropdown item 2';
|
const searchTerm = 'Choice 2';
|
||||||
|
|
||||||
cy.get('[data-test-hook=search-floor]')
|
cy.get('[data-test-hook=search-floor]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
|
@ -520,7 +520,7 @@ describe('Choices - select multiple', () => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 1');
|
expect($choice.text().trim()).to.equal('Choice 1');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -530,7 +530,7 @@ describe('Choices - select multiple', () => {
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal(
|
expect($choice.text().trim()).to.equal(
|
||||||
`Dropdown item ${index + 1}`,
|
`Choice ${index + 1}`,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -555,7 +555,7 @@ describe('Choices - select multiple', () => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
|
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
|
|
@ -14,7 +14,7 @@ describe('Choices - select one', () => {
|
||||||
|
|
||||||
describe('selecting choice', () => {
|
describe('selecting choice', () => {
|
||||||
describe('focusing on text input', () => {
|
describe('focusing on text input', () => {
|
||||||
const selectedChoiceText = 'Dropdown item 1';
|
const selectedChoiceText = 'Choice 1';
|
||||||
|
|
||||||
it('displays a dropdown of choices', () => {
|
it('displays a dropdown of choices', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
|
@ -26,9 +26,7 @@ describe('Choices - select one', () => {
|
||||||
.children()
|
.children()
|
||||||
.should('have.length', 4)
|
.should('have.length', 4)
|
||||||
.each(($choice, index) => {
|
.each(($choice, index) => {
|
||||||
expect($choice.text().trim()).to.equal(
|
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
||||||
`Dropdown item ${index + 1}`,
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -92,7 +90,7 @@ describe('Choices - select one', () => {
|
||||||
.children()
|
.children()
|
||||||
.first()
|
.first()
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 2');
|
expect($choice.text().trim()).to.equal('Choice 2');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -108,7 +106,7 @@ describe('Choices - select one', () => {
|
||||||
.children()
|
.children()
|
||||||
.first()
|
.first()
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 3');
|
expect($choice.text().trim()).to.equal('Choice 3');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -319,7 +317,7 @@ describe('Choices - select one', () => {
|
||||||
searchEnabled: false
|
searchEnabled: false
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
const selectedChoiceText = 'Dropdown item 3';
|
const selectedChoiceText = 'Choice 3';
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.get('[data-test-hook=search-disabled]')
|
cy.get('[data-test-hook=search-disabled]')
|
||||||
|
@ -383,7 +381,7 @@ describe('Choices - select one', () => {
|
||||||
|
|
||||||
describe('search floor reached', () => {
|
describe('search floor reached', () => {
|
||||||
it('displays choices filtered by inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
const searchTerm = 'Dropdown item 2';
|
const searchTerm = 'Choice 2';
|
||||||
|
|
||||||
cy.get('[data-test-hook=search-floor]')
|
cy.get('[data-test-hook=search-floor]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
|
@ -468,7 +466,7 @@ describe('Choices - select one', () => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal('Dropdown item 1');
|
expect($choice.text().trim()).to.equal('Choice 1');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -477,9 +475,7 @@ describe('Choices - select one', () => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal(
|
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
||||||
`Dropdown item ${index + 1}`,
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
@ -503,7 +499,7 @@ describe('Choices - select one', () => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should($choice => {
|
.should($choice => {
|
||||||
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
|
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
@ -579,5 +575,66 @@ describe('Choices - select one', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('dependencies', () => {
|
||||||
|
describe('selecting "Parent choice 2"', () => {
|
||||||
|
it('enables the child Choices instance', () => {
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(1)
|
||||||
|
.should('have.class', 'is-disabled');
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(0)
|
||||||
|
.click();
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.eq(1)
|
||||||
|
.click();
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(1)
|
||||||
|
.should('not.have.class', 'is-disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('changing selection from "Parent choice 2" to something else', () => {
|
||||||
|
it('disables the child Choices instance', () => {
|
||||||
|
// open parent instance and select second choice
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(0)
|
||||||
|
.click()
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.eq(1)
|
||||||
|
.click();
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(1)
|
||||||
|
.should('not.have.class', 'is-disabled');
|
||||||
|
|
||||||
|
// open parent instance and select third choice
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(0)
|
||||||
|
.click()
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.eq(2)
|
||||||
|
.click();
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=dependencies]')
|
||||||
|
.find('.choices')
|
||||||
|
.eq(1)
|
||||||
|
.should('have.class', 'is-disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -85,19 +85,19 @@
|
||||||
<label for="choices-multiple-default">Default</label>
|
<label for="choices-multiple-default">Default</label>
|
||||||
<select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder"
|
<select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder"
|
||||||
multiple>
|
multiple>
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-multiple-remove-button">With remove button</label>
|
<label for="choices-multiple-remove-button">With remove button</label>
|
||||||
<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder"
|
<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder"
|
||||||
multiple>
|
multiple>
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-multiple-groups">Option groups</label>
|
<label for="choices-multiple-groups">Option groups</label>
|
||||||
|
@ -143,10 +143,10 @@
|
||||||
<label for="choices-multiple-rtl">Right-to-left</label>
|
<label for="choices-multiple-rtl">Right-to-left</label>
|
||||||
<select class="form-control" data-trigger name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder"
|
<select class="form-control" data-trigger name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder"
|
||||||
multiple dir="rtl">
|
multiple dir="rtl">
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="label-event">Use label in event (add/remove)</label>
|
<label for="label-event">Use label in event (add/remove)</label>
|
||||||
|
@ -158,9 +158,9 @@
|
||||||
<label for="choices-single-default">Default</label>
|
<label for="choices-single-default">Default</label>
|
||||||
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
|
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
|
||||||
<option placeholder>This is a placeholder</option>
|
<option placeholder>This is a placeholder</option>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<p><small>If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!</small></p>
|
<p><small>If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!</small></p>
|
||||||
|
@ -212,9 +212,9 @@
|
||||||
<label for="choices-single-rtl">Right-to-left</label>
|
<label for="choices-single-rtl">Right-to-left</label>
|
||||||
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder"
|
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder"
|
||||||
dir="rtl">
|
dir="rtl">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-single-no-search">Options added via config with no search</label>
|
<label for="choices-single-no-search">Options added via config with no search</label>
|
||||||
|
@ -295,10 +295,10 @@
|
||||||
<label for="reset-multiple">And me!</label>
|
<label for="reset-multiple">And me!</label>
|
||||||
<select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
|
<select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
|
||||||
multiple>
|
multiple>
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button type="reset">Reset</button>
|
<button type="reset">Reset</button>
|
||||||
|
|
|
@ -32,87 +32,87 @@
|
||||||
<div data-test-hook="basic">
|
<div data-test-hook="basic">
|
||||||
<label for="choices-basic">Basic</label>
|
<label for="choices-basic">Basic</label>
|
||||||
<select class="form-control" name="choices-basic" id="choices-basic" multiple>
|
<select class="form-control" name="choices-basic" id="choices-basic" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Find me">Dropdown item 3</option>
|
<option value="Find me">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="remove-button">
|
<div data-test-hook="remove-button">
|
||||||
<label for="choices-remove-button">Remove button</label>
|
<label for="choices-remove-button">Remove button</label>
|
||||||
<select class="form-control" name="choices-remove-button" id="choices-remove-button" multiple>
|
<select class="form-control" name="choices-remove-button" id="choices-remove-button" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="disabled-choice">
|
<div data-test-hook="disabled-choice">
|
||||||
<label for="choices-disabled-choice">Disabled choice</label>
|
<label for="choices-disabled-choice">Disabled choice</label>
|
||||||
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" multiple>
|
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="add-items-disabled">
|
<div data-test-hook="add-items-disabled">
|
||||||
<label for="choices-add-items-disabled">Add items disabled</label>
|
<label for="choices-add-items-disabled">Add items disabled</label>
|
||||||
<select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled" multiple>
|
<select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled" multiple>
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="selection-limit">
|
<div data-test-hook="selection-limit">
|
||||||
<label for="choices-selection-limit">Input limit</label>
|
<label for="choices-selection-limit">Input limit</label>
|
||||||
<select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
|
<select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
<option value="Dropdown item 5">Dropdown item 5</option>
|
<option value="Choice 5">Choice 5</option>
|
||||||
<option value="Dropdown item 6">Dropdown item 6</option>
|
<option value="Choice 6">Choice 6</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="prepend-append">
|
<div data-test-hook="prepend-append">
|
||||||
<label for="choices-prepend-append">Prepend/append</label>
|
<label for="choices-prepend-append">Prepend/append</label>
|
||||||
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append" multiple>
|
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="render-choice-limit">
|
<div data-test-hook="render-choice-limit">
|
||||||
<label for="choices-render-choice-limit">Render choice limit</label>
|
<label for="choices-render-choice-limit">Render choice limit</label>
|
||||||
<select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit" multiple>
|
<select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="search-floor">
|
<div data-test-hook="search-floor">
|
||||||
<label for="choices-search-floor">Search floor</label>
|
<label for="choices-search-floor">Search floor</label>
|
||||||
<select class="form-control" name="choices-search-floor" id="choices-search-floor" multiple>
|
<select class="form-control" name="choices-search-floor" id="choices-search-floor" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="placeholder">
|
<div data-test-hook="placeholder">
|
||||||
<label for="choices-placeholder">Placeholder</label>
|
<label for="choices-placeholder">Placeholder</label>
|
||||||
<select class="form-control" name="choices-placeholder" id="choices-placeholder" multiple>
|
<select class="form-control" name="choices-placeholder" id="choices-placeholder" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -124,21 +124,21 @@
|
||||||
<div data-test-hook="scrolling-dropdown">
|
<div data-test-hook="scrolling-dropdown">
|
||||||
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
|
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
|
||||||
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown" multiple>
|
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown" multiple>
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
<option value="Dropdown item 5">Dropdown item 5</option>
|
<option value="Choice 5">Choice 5</option>
|
||||||
<option value="Dropdown item 6">Dropdown item 6</option>
|
<option value="Choice 6">Choice 6</option>
|
||||||
<option value="Dropdown item 7">Dropdown item 7</option>
|
<option value="Choice 7">Choice 7</option>
|
||||||
<option value="Dropdown item 8">Dropdown item 8</option>
|
<option value="Choice 8">Choice 8</option>
|
||||||
<option value="Dropdown item 9">Dropdown item 9</option>
|
<option value="Choice 9">Choice 9</option>
|
||||||
<option value="Dropdown item 10">Dropdown item 10</option>
|
<option value="Choice 10">Choice 10</option>
|
||||||
<option value="Dropdown item 11">Dropdown item 11</option>
|
<option value="Choice 11">Choice 11</option>
|
||||||
<option value="Dropdown item 12">Dropdown item 12</option>
|
<option value="Choice 12">Choice 12</option>
|
||||||
<option value="Dropdown item 13">Dropdown item 13</option>
|
<option value="Choice 13">Choice 13</option>
|
||||||
<option value="Dropdown item 14">Dropdown item 14</option>
|
<option value="Choice 14">Choice 14</option>
|
||||||
<option value="Dropdown item 15">Dropdown item 15</option>
|
<option value="Choice 15">Choice 15</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -187,7 +187,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-search-floor', {
|
new Choices('#choices-search-floor', {
|
||||||
searchFloor: 10,
|
searchFloor: 5,
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-placeholder', {
|
new Choices('#choices-placeholder', {
|
||||||
|
|
|
@ -32,75 +32,75 @@
|
||||||
<div data-test-hook="basic">
|
<div data-test-hook="basic">
|
||||||
<label for="choices-basic">Basic</label>
|
<label for="choices-basic">Basic</label>
|
||||||
<select class="form-control" name="choices-basic" id="choices-basic">
|
<select class="form-control" name="choices-basic" id="choices-basic">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Find me">Dropdown item 3</option>
|
<option value="Find me">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="remove-button">
|
<div data-test-hook="remove-button">
|
||||||
<label for="choices-remove-button">Remove button</label>
|
<label for="choices-remove-button">Remove button</label>
|
||||||
<select class="form-control" name="choices-remove-button" id="choices-remove-button">
|
<select class="form-control" name="choices-remove-button" id="choices-remove-button">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="disabled-choice">
|
<div data-test-hook="disabled-choice">
|
||||||
<label for="choices-disabled-choice">Disabled choice</label>
|
<label for="choices-disabled-choice">Disabled choice</label>
|
||||||
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice">
|
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="add-items-disabled">
|
<div data-test-hook="add-items-disabled">
|
||||||
<label for="choices-add-items-disabled">Add items disabled</label>
|
<label for="choices-add-items-disabled">Add items disabled</label>
|
||||||
<select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled">
|
<select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled">
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="prepend-append">
|
<div data-test-hook="prepend-append">
|
||||||
<label for="choices-prepend-append">Prepend/append</label>
|
<label for="choices-prepend-append">Prepend/append</label>
|
||||||
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
|
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="render-choice-limit">
|
<div data-test-hook="render-choice-limit">
|
||||||
<label for="choices-render-choice-limit">Render choice limit</label>
|
<label for="choices-render-choice-limit">Render choice limit</label>
|
||||||
<select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit">
|
<select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="search-disabled">
|
<div data-test-hook="search-disabled">
|
||||||
<label for="choices-search-disabled">Search disabled</label>
|
<label for="choices-search-disabled">Search disabled</label>
|
||||||
<select class="form-control" name="choices-search-disabled" id="choices-search-disabled">
|
<select class="form-control" name="choices-search-disabled" id="choices-search-disabled">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="search-floor">
|
<div data-test-hook="search-floor">
|
||||||
<label for="choices-search-floor">Search floor</label>
|
<label for="choices-search-floor">Search floor</label>
|
||||||
<select class="form-control" name="choices-search-floor" id="choices-search-floor">
|
<select class="form-control" name="choices-search-floor" id="choices-search-floor">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -112,21 +112,21 @@
|
||||||
<div data-test-hook="scrolling-dropdown">
|
<div data-test-hook="scrolling-dropdown">
|
||||||
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
|
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
|
||||||
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown">
|
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Choice 3">Choice 3</option>
|
||||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
<option value="Choice 4">Choice 4</option>
|
||||||
<option value="Dropdown item 5">Dropdown item 5</option>
|
<option value="Choice 5">Choice 5</option>
|
||||||
<option value="Dropdown item 6">Dropdown item 6</option>
|
<option value="Choice 6">Choice 6</option>
|
||||||
<option value="Dropdown item 7">Dropdown item 7</option>
|
<option value="Choice 7">Choice 7</option>
|
||||||
<option value="Dropdown item 8">Dropdown item 8</option>
|
<option value="Choice 8">Choice 8</option>
|
||||||
<option value="Dropdown item 9">Dropdown item 9</option>
|
<option value="Choice 9">Choice 9</option>
|
||||||
<option value="Dropdown item 10">Dropdown item 10</option>
|
<option value="Choice 10">Choice 10</option>
|
||||||
<option value="Dropdown item 11">Dropdown item 11</option>
|
<option value="Choice 11">Choice 11</option>
|
||||||
<option value="Dropdown item 12">Dropdown item 12</option>
|
<option value="Choice 12">Choice 12</option>
|
||||||
<option value="Dropdown item 13">Dropdown item 13</option>
|
<option value="Choice 13">Choice 13</option>
|
||||||
<option value="Dropdown item 14">Dropdown item 14</option>
|
<option value="Choice 14">Choice 14</option>
|
||||||
<option value="Dropdown item 15">Dropdown item 15</option>
|
<option value="Choice 15">Choice 15</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -145,6 +145,22 @@
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div data-test-hook="dependencies">
|
||||||
|
<label for="choices-parent">Parent</label>
|
||||||
|
<select class="form-control" name="choices-parent" id="choices-parent">
|
||||||
|
<option value="Parent choice 1">Parent choice 1</option>
|
||||||
|
<option value="Parent choice 2">Parent choice 2</option>
|
||||||
|
<option value="Parent choice 3">Parent choice 3</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="choices-child">Child</label>
|
||||||
|
<select class="form-control" name="choices-child" id="choices-child">
|
||||||
|
<option value="Child choice 1">Child choice 1</option>
|
||||||
|
<option value="Child choice 2">Child choice 2</option>
|
||||||
|
<option value="Child choice 3">Child choice 3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -177,7 +193,7 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
new Choices('#choices-search-floor', {
|
new Choices('#choices-search-floor', {
|
||||||
searchFloor: 10,
|
searchFloor: 5,
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-remote-data', {
|
new Choices('#choices-remote-data', {
|
||||||
|
@ -199,6 +215,17 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-groups');
|
new Choices('#choices-groups');
|
||||||
|
|
||||||
|
const parent = new Choices('#choices-parent');
|
||||||
|
const child = new Choices('#choices-child').disable();
|
||||||
|
|
||||||
|
parent.passedElement.element.addEventListener('change', (event) => {
|
||||||
|
if (event.detail.value === 'Parent choice 2') {
|
||||||
|
child.enable();
|
||||||
|
} else {
|
||||||
|
child.disable();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue