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

Update choice value/labels + add test for parent/child link

Browse source
This commit is contained in:
Josh Johnson 2018-10-27 21:00:49 +01:00
parent dad2b345cd
commit d5437413a4
5 changed files with 219 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
cypress/integration/select-multiple.spec.js
View file

@ -13,7 +13,7 @@ describe('Choices - select multiple', () => {
describe('selecting choices', () => {
describe('focusing on text input', () => {
const selectedChoiceText = 'Dropdown item 1';
const selectedChoiceText = 'Choice 1';
it('displays a dropdown of choices', () => {
cy.get('[data-test-hook=basic]')
@ -26,7 +26,7 @@ describe('Choices - select multiple', () => {
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
`Choice ${index + 1}`,
);
});
});
@ -151,7 +151,7 @@ describe('Choices - select multiple', () => {
.children()
.first()
.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()
.first()
.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', () => {
it('displays choices filtered by inputted value', () => {
const searchTerm = 'Dropdown item 2';
const searchTerm = 'Choice 2';
cy.get('[data-test-hook=search-floor]')
.find('.choices__input--cloned')
@ -520,7 +520,7 @@ describe('Choices - select multiple', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.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')
.should($choice => {
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]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.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]')

83
cypress/integration/select-one.spec.js
View file

@ -14,7 +14,7 @@ describe('Choices - select one', () => {
describe('selecting choice', () => {
describe('focusing on text input', () => {
const selectedChoiceText = 'Dropdown item 1';
const selectedChoiceText = 'Choice 1';
it('displays a dropdown of choices', () => {
cy.get('[data-test-hook=basic]')
@ -26,9 +26,7 @@ describe('Choices - select one', () => {
.children()
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
});
@ -92,7 +90,7 @@ describe('Choices - select one', () => {
.children()
.first()
.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()
.first()
.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
}
*/
const selectedChoiceText = 'Dropdown item 3';
const selectedChoiceText = 'Choice 3';
beforeEach(() => {
cy.get('[data-test-hook=search-disabled]')
@ -383,7 +381,7 @@ describe('Choices - select one', () => {
describe('search floor reached', () => {
it('displays choices filtered by inputted value', () => {
const searchTerm = 'Dropdown item 2';
const searchTerm = 'Choice 2';
cy.get('[data-test-hook=search-floor]')
.find('.choices__input--cloned')
@ -468,7 +466,7 @@ describe('Choices - select one', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.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]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
cy.get('[data-test-hook=scrolling-dropdown]')
@ -503,7 +499,7 @@ describe('Choices - select one', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.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]')
@ -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');
});
});
});
});
});

44
public/index.html
View file

@ -85,19 +85,19 @@
<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"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>
<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"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
<label for="choices-multiple-groups">Option groups</label>
@ -143,10 +143,10 @@
<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"
multiple dir="rtl">
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>
<label for="label-event">Use label in event (add/remove)</label>
@ -158,9 +158,9 @@
<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">
<option placeholder>This is a placeholder</option>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
<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>
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder"
dir="rtl">
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
<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>
<select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
multiple>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>
<button type="reset">Reset</button>

98
public/test/select-multiple.html
View file

@ -32,87 +32,87 @@
<div data-test-hook="basic">
<label for="choices-basic">Basic</label>
<select class="form-control" name="choices-basic" id="choices-basic" multiple>
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Find me">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Find me">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
<div data-test-hook="remove-button">
<label for="choices-remove-button">Remove button</label>
<select class="form-control" name="choices-remove-button" id="choices-remove-button" multiple>
<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>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
<div data-test-hook="disabled-choice">
<label for="choices-disabled-choice">Disabled choice</label>
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" multiple>
<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>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>
</div>
<div data-test-hook="add-items-disabled">
<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>
<option value="Dropdown item 1" selected>Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="selection-limit">
<label for="choices-selection-limit">Input limit</label>
<select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
<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>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
<option value="Choice 5">Choice 5</option>
<option value="Choice 6">Choice 6</option>
</select>
</div>
<div data-test-hook="prepend-append">
<label for="choices-prepend-append">Prepend/append</label>
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append" multiple>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="render-choice-limit">
<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>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="search-floor">
<label for="choices-search-floor">Search floor</label>
<select class="form-control" name="choices-search-floor" id="choices-search-floor" multiple>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="placeholder">
<label for="choices-placeholder">Placeholder</label>
<select class="form-control" name="choices-placeholder" id="choices-placeholder" multiple>
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
@ -124,21 +124,21 @@
<div data-test-hook="scrolling-dropdown">
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown" multiple>
<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>
<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>
<option value="Dropdown item 7">Dropdown item 7</option>
<option value="Dropdown item 8">Dropdown item 8</option>
<option value="Dropdown item 9">Dropdown item 9</option>
<option value="Dropdown item 10">Dropdown item 10</option>
<option value="Dropdown item 11">Dropdown item 11</option>
<option value="Dropdown item 12">Dropdown item 12</option>
<option value="Dropdown item 13">Dropdown item 13</option>
<option value="Dropdown item 14">Dropdown item 14</option>
<option value="Dropdown item 15">Dropdown item 15</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
<option value="Choice 5">Choice 5</option>
<option value="Choice 6">Choice 6</option>
<option value="Choice 7">Choice 7</option>
<option value="Choice 8">Choice 8</option>
<option value="Choice 9">Choice 9</option>
<option value="Choice 10">Choice 10</option>
<option value="Choice 11">Choice 11</option>
<option value="Choice 12">Choice 12</option>
<option value="Choice 13">Choice 13</option>
<option value="Choice 14">Choice 14</option>
<option value="Choice 15">Choice 15</option>
</select>
</div>
@ -187,7 +187,7 @@
});
new Choices('#choices-search-floor', {
searchFloor: 10,
searchFloor: 5,
});
new Choices('#choices-placeholder', {

113
public/test/select-one.html
View file

@ -32,75 +32,75 @@
<div data-test-hook="basic">
<label for="choices-basic">Basic</label>
<select class="form-control" name="choices-basic" id="choices-basic">
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Find me">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Find me">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
<div data-test-hook="remove-button">
<label for="choices-remove-button">Remove button</label>
<select class="form-control" name="choices-remove-button" id="choices-remove-button">
<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>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
<div data-test-hook="disabled-choice">
<label for="choices-disabled-choice">Disabled choice</label>
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice">
<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>
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>Choice 4</option>
</select>
</div>
<div data-test-hook="add-items-disabled">
<label for="choices-add-items-disabled">Add items disabled</label>
<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="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="prepend-append">
<label for="choices-prepend-append">Prepend/append</label>
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="render-choice-limit">
<label for="choices-render-choice-limit">Render choice limit</label>
<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="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="search-disabled">
<label for="choices-search-disabled">Search disabled</label>
<select class="form-control" name="choices-search-disabled" id="choices-search-disabled">
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="search-floor">
<label for="choices-search-floor">Search floor</label>
<select class="form-control" name="choices-search-floor" id="choices-search-floor">
<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>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
@ -112,21 +112,21 @@
<div data-test-hook="scrolling-dropdown">
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown">
<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>
<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>
<option value="Dropdown item 7">Dropdown item 7</option>
<option value="Dropdown item 8">Dropdown item 8</option>
<option value="Dropdown item 9">Dropdown item 9</option>
<option value="Dropdown item 10">Dropdown item 10</option>
<option value="Dropdown item 11">Dropdown item 11</option>
<option value="Dropdown item 12">Dropdown item 12</option>
<option value="Dropdown item 13">Dropdown item 13</option>
<option value="Dropdown item 14">Dropdown item 14</option>
<option value="Dropdown item 15">Dropdown item 15</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
<option value="Choice 5">Choice 5</option>
<option value="Choice 6">Choice 6</option>
<option value="Choice 7">Choice 7</option>
<option value="Choice 8">Choice 8</option>
<option value="Choice 9">Choice 9</option>
<option value="Choice 10">Choice 10</option>
<option value="Choice 11">Choice 11</option>
<option value="Choice 12">Choice 12</option>
<option value="Choice 13">Choice 13</option>
<option value="Choice 14">Choice 14</option>
<option value="Choice 15">Choice 15</option>
</select>
</div>
@ -145,6 +145,22 @@
</optgroup>
</select>
</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>
<script>
@ -177,7 +193,7 @@
})
new Choices('#choices-search-floor', {
searchFloor: 10,
searchFloor: 5,
});
new Choices('#choices-remote-data', {
@ -199,6 +215,17 @@
});
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>
</body>