Parent Child Dropdown

A vue plugin that loads data in child dropdown through ajax when an option is selected from a parent dropdown.

Getting Started

Step 1: Install plugin

npm install parent-child-dropdown

Step 2: Go to project's main js file (In Laravel this file is typically called app.js and found in resources/js directory.) and import installed plugin.

import ParentChildDropdown from 'parent-child-dropdown';

Vue.use(ParentChildDropdown);

Step 3: Now use this plugin whatever page it is required at.

How To Use

Suppose we have 3 dropdowns.

1. Country Dropdown
   
2. City Dropdown (loads cities whenever the country is changed from country dropdown)
   
3. Location Dropdown (loads locations whenever the city is changed from city dropdown)
   

Note the hierarchy:

1. Country has no parent.
2. Country (is a parent of) ----> City (is a parent of) Location.
3. Location has no child.

<div id='geography_section'>

<parent-child-dropdown
    label="Country"
    name="country"
    url="/get-countries"
    event_to_fire="load_cities">
</parent-child-dropdown>

<parent-child-dropdown
    label="City"
    name="city"
    url="/get-cities"
    request_param="country_id"    
    event_to_listen="load_cities"
    event_to_fire="load_locations">
</parent-child-dropdown>

<parent-child-dropdown
    label="Location"
    name="location"
    url="/get-locations"
    request_param="city_id"
    event_to_listen="load_locations">
</parent-child-dropdown>

<div>

<scritp>

new Vue({el: '#geography_section'});

</script>

Points To Be Noted:

1. The event fired by 'Country dropdown' is same as the event listened by 'City dropdown' and event fired by 'City dropdown' is same as the event listened by 'Location dropdown'.

2. The value 'country_id' of the 'request_param' attribute (in case of City dropdown) will be used at server to filter the cities of coresponding country and same goes for location dropdown.

3. Server side code must be written that will return countries, cities & locations at following URLS:
   http://your-domain.com/get-countries
   http://your-domain.com/get-cities?country_id=xyz
   http://your-domain.com/get-locations?city_id=xyz
   

Note that the query string will be passed by plugin to server if 'request_param' has been defined as plugin attribute. (as shown above)

Props

Name	Type	Required	Default	Description
label	string	yes		Label of the Dropdown
name	string	yes		name attribute of the 'select' html control
required	boolean	no	false	Whether the the dropdown's value is required or optional
url	string	yes		The URL where the data for the dropdown will load from
request_param	string	Parent Dropdown = no Child Dropdown = yes		The HTTP request parameter's name that will be used at server to filter dropdown data
event_to_fire	string	Parent Dropdown = yes Child Dropdown = no		This could be any text but its value must match the value of ' event_to_listen' attribute of child dropdown
event_to_listen	string	Parent Dropdown = no Child Dropdown = yes		This could be any text, but its value must match the value of 'event_to_listen' attribute of parent dropdown
old_selected_option	string	no	empty string i.e. ''	Previously selected value
err_msg_from_parent	string	no	empty string i.e. ''	Message from server if the dropdown value does not meet the validations at server