PHPackages wavevision/dependent-selectbox - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. wavevision/dependent-selectbox AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) wavevision/dependent-selectbox ============================== Dependent selectbox component for Nette forms. 3.0.5(5y ago)33.8k↓35%1[18 PRs](https://github.com/wavevision/dependent-selectbox/pulls)MITPHPPHP >=7.4 Since Oct 11Pushed 3y ago2 watchersCompare [ Source](https://github.com/wavevision/dependent-selectbox)[ Packagist](https://packagist.org/packages/wavevision/dependent-selectbox)[ RSS](/packages/wavevision-dependent-selectbox/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (4)Dependencies (10)Versions (62)Used By (0) [![Wavevision s.r.o.](https://camo.githubusercontent.com/9479da35305d94b0244ac1c81fe283d0abb86fe217b2a815056165c67c0574e6/68747470733a2f2f77617665766973696f6e2e636f6d2f696d616765732f77617665766973696f6e2d6c6f676f2e706e67)](https://github.com/wavevision) Dependent SelectBox =================== [](#dependent-selectbox) [![CI](https://github.com/wavevision/dependent-selectbox/workflows/CI/badge.svg)](https://github.com/wavevision/dependent-selectbox/actions/workflows/ci.yml)[![Coverage Status](https://camo.githubusercontent.com/8b09619a52b8b8b2dd93de0c43536547041fe9c65da6005601e211c57f78ef66/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f77617665766973696f6e2f646570656e64656e742d73656c656374626f782f62616467652e7376673f6272616e63683d6d617374657226736572766963653d676974687562)](https://coveralls.io/github/wavevision/dependent-selectbox?branch=master)[![PHPStan](https://camo.githubusercontent.com/027fd636e970cf392fd4478baf3261048b41955d2905a95fb47da6bf19b8640a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374796c652d6c6576656c2532306d61782d627269676874677265656e2e7376673f6c6162656c3d7068707374616e)](https://github.com/phpstan/phpstan)[![Nette Forms](https://camo.githubusercontent.com/aab45cbe6802cf1e8bc3a7a49b38957dc06624aec22426909b48d1a9e79ff012/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e657474652f666f726d732d332e312d626c7565)](https://github.com/nette/forms)[![Naja](https://camo.githubusercontent.com/b59c641ed1758977635bbb1050f3287cc8828c02c730f68bc3badee41e327296/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e616a612d322e312d626c7565)](https://github.com/jiripudil/Naja) Dependent select box component for [nette/forms](https://github.com/nette/forms) with [naja](https://github.com/jiripudil/Naja) extension on client side. Features: --------- [](#features) - strict typed - works on any form without customizing its renderer (no need for snippets) - supports form containers (unlimited depth, both for select box itself and its parents) - TypeScript and Naja powered client side with events emitted so you can attach listeners to them - conditional parents (make a form control become a select box's parent when some other control has a certain value) Installation ------------ [](#installation) Use [Composer](http://getcomposer.org) to get the Nette forms component ``` composer require wavevision/dependent-selectbox ``` Install the client side via [Yarn](https://yarnpkg.com) ``` yarn add @wavevision/dependent-selectbox ``` or [npm](https://npmjs.com) ``` npm install --save @wavevision/dependent-selectbox ``` Usage ----- [](#usage) ### Server side [](#server-side) Create a form that will be an instance of `Wavevision\DependentSelectBox\Form\Form`. If you don't want to / cannot inherit from our base form, just make sure the form you create uses `Wavevision\DependentSelectBox\Form\DependentForm` trait. Your form should also use `Wavevision\DependentSelectBox\Form\DependentContainer` to have its containers extended with the dependent select box too, however, if you already have your own implementation of `Nette\Forms\Container`, just make sure the container uses `Wavevision\DependentSelectBox\Form\DependentControl` trait. After this, your form and its containers will be extended with `addDependentSelectBox` method. This method accepts following arguments: **Argument****Type****Description**`$name``string`name of the control`$label``string`label for the control`...$parents``Nette\Forms\Controls\BaseControl[]`list of form controls whom's values will be treated as parent values to get the dependent dataThe method returns an instance of [`Wavevision\DependentSelectBox\DependentSelectBox`](./src/DependentSelectBox/DependentSelectBox.php). #### The recommended way of using the form is in a `Control` component. [](#the-recommended-way-of-using-the-form-is-in-a-control-component) ``` use Nette\Application\UI\Control; use Nette\Application\UI\Presenter; use Wavevision\DependentSelectBox\DependentComponent; use Wavevision\DependentSelectBox\DependentData; use Wavevision\DependentSelectBox\DependentValues; use Wavevision\DependentSelectBox\Form\Form; class FormComponent extends Control { // add 'loadDependenData' signal and a few utilities use DependentComponent; public function __construct() { $this->monitor(Presenter::class, function (): void { // setup form in component - optionally pass form name (default 'form') $this->dependentComponentSetup(); if ($this->hasReceivedDependentSignal()) { // if 'loadDependenData' signal received, do anything extra we need } }); } protected function createComponentForm(): Form { // create your form as you are used to $form->addDependentSelectBox('name', 'Label', $form['someParentControl']) ->setDependentCallback(function (DependentValues $values): DependentData { // get ArrayHash values, if you perfer array, use getRawValues $formattedValues = $values->getValues(); $data = new DependentData(); if ($formattedValues->someParentControl === 'someDependentValue') { $data->setItems(['firstItem' => 'firstValue']); } return $data; }) // make the select box disabled when no values have been loaded ->setDisabledWhenEmpty() // if loaded values contain only one item, select it so the user does not have to ->setAutoSelectSingleValue() // if 'someOtherControl' has 'someValue', treat 'someControl' as parent ->addConditionalParent($form['someControl'], $form['someOtherControl'], 'someValue'); // add form handlers etc. return $form; } } ``` > **NOTE**: You can use the form in a `Presenter` too, the only limitation is that you can only have one dependent form per page like this. If you wrap your form in a component (each using `DependentComponent` trait), you can then use as many forms on one page as you wish. ### Client side [](#client-side) There are a few ways of integrating the client side into your project. #### 1. Register dependent select box as Naja extension [](#1-register-dependent-select-box-as-naja-extension) ``` import naja from 'naja'; import DependentSelectBox from '@wavevision/dependent-selectbox'; naja.registerExtension(new DependentSelectBox()); // add other extensions, initialize etc. ``` As mentioned in features, the extension emits events you can attach listeners to. EventDescription`dependentSelectBoxLoading`fires right after a parent changes and a request to server is being dispatched`dependentSelectBoxLoaded`fires when the data loading is finishedListeners for both events will receive a `CustomEvent` object containing `detail` with these properties: PropertyTypeDescription`form``HTMLFormElement`the form in which the event has been triggered`dependentSelectBoxes``HTMLSelectElement[]`an array of all dependent select boxes in the formThe first event also contains `request` property, which is an object containing: PropertyTypeDescription`trigger``string`HTML `id` of a parent that triggered the request`values``ParentsValues`object with current values of parents and filled select boxes (HTML `name` properties of elements are used as keys)The latter one contains `response` object, in which keys are HTML `id` attributes of updated select boxes and values are objects with: PropertyTypeDescription`disabled``boolean`select box state`items``string`inner HTML of the select boxPlease, refer to [Naja docs](https://naja.js.org) to find out more about its extensions. #### 2. Import bundled version with Naja included [](#2-import-bundled-version-with-naja-included) If you don't use Naja elsewhere in your project an you don't want to set it up, this is your way to go. ⚠️ **WARNING:** This might collide with other Nette AJAX libraries, if used! ``` import '@wavevision/dependent-selectbox/dist/dependentSelectBox.all'; ``` #### 3. Use it directly in a `script` tag [](#3-use-it-directly-in-a-script-tag) For old-school people only 😎. ``` ``` ### Health Score 36 — LowBetter than 82% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity26 Limited adoption so far Community13 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 95.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~13 days Recently: every ~41 days Total 42 Last Release 1859d ago Major Versions 1.3.7 → 2.0.02020-01-15 2.3.2 → 3.0.02020-11-03 PHP version history (2 changes)1.0.0PHP >=7.2 2.0.0PHP >=7.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/3af21e3a334be19fe9e3355c0d300a8a41e63322103aa24929e745d7cac6c965?d=identicon)[rozsival](/maintainers/rozsival) ![](https://www.gravatar.com/avatar/64a880caaffe510a647f7ae7da515846fc661fe10744b17a981ddbc47bbae4df?d=identicon)[jfilla](/maintainers/jfilla) --- Top Contributors [![rozsival](https://avatars.githubusercontent.com/u/7785240?v=4)](https://github.com/rozsival "rozsival (180 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![jfilla](https://avatars.githubusercontent.com/u/5280477?v=4)](https://github.com/jfilla "jfilla (3 commits)") --- Tags dependent-selectsformsnajanettenette-formsselectbox ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/wavevision-dependent-selectbox/health.svg) ``` [![Health](https://phpackages.com/badges/wavevision-dependent-selectbox/health.svg)](https://phpackages.com/packages/wavevision-dependent-selectbox) ``` ### Alternatives [nette/code-checker ✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards. 881.7M6](/packages/nette-code-checker)[contributte/forms-multiplier Multiplier for nette forms 281.4M3](/packages/contributte-forms-multiplier)[kdyby/forms-replicator Nette forms container replicator aka addDynamic 32997.7k6](/packages/kdyby-forms-replicator)[contributte/forms-wizard Wizard component for nette/forms 15783.7k](/packages/contributte-forms-wizard)[radekdostal/nette-datetimepicker DatePicker and DateTimePicker input controls for Nette Framework 13272.2k3](/packages/radekdostal-nette-datetimepicker)[webchemistry/forms-multiplier Multiplier for nette forms 2860.9k](/packages/webchemistry-forms-multiplier) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)