Ajax Select

Self populate & linked ajax selects.

Atropos only 1Kb gzipped

See browser console for ajax request format (debug is enabled in this demo)!

Select Basic

                
                  <!-- main select -->
                  <select class="form-select mb-3" data-sow-select='{"linkWith": "#state_list"}'>
                    <option value="" selected disabled>Country...</option>
                    <option value="us">[US] United States</option>
                    <option value="gb">[GB] United Kingdom</option>
                  </select>

                  <!-- second select -->
                  <select disabled id="state_list" class="form-select mb-3" data-sow-select='{
                    "source": "../demo.files/json/country/state_list/us.json",
                    "selfAutoPopulate": false,
                    "debug": false
                  }'>
                    <option value="0" selected>Select country first...</option>
                  </select>

                
                  <!--

                    All available options

                    **
                    source            = URL to send ajax request
                    method            = GET | POST
                    param             = is actualy the value of selected option, attached to ajax request as ?value=...
                                        default: 'value'

                                        The final ajax request is similar to:
                                        ../demo.files/json/country/country_list.json?value=us
                                        You can get the selected value on your backend like this (PHP exemple)
                                        $selected_value = $_GET['value'];
                    
                    **
                    selfAutoPopulate   = autopopulate on page load (if "source" provided)

                    **
                    linkWith          = link with one or more other selects
                                        on change, refresh all linked selectes
                                        according to their "source"

                    **
                    debug             = console info about ajax requests

                  -->

                  data-sow-select='{
                    "source"            : "../demo.files/json/country/country_list.json",
                    "method"            : "GET",
                    "param"             : "value",

                    "selfAutoPopulate"  : false,
                    "linkWith"          : "",
                    "debug"             : false
                  }

                
                  <option value="GB">United Kingdom</option>
                  <option value="US" selected>United States</option>

                  [
                    {
                      "value": "GB",
                      "text": "United Kingdom",
                      "selected": false,
                      "disabed": false
                    },{
                      "value": "US",
                      "text": "United States",
                      "selected": true,
                      "disabed": false
                    }
                  ]

View json file sample

Select Self-Populate on load

Preview
HTML

                
                  <select class="form-select mb-3" data-sow-select='{
                    "source": "../demo.files/json/country/country_list.json",
                    "selfAutoPopulate": true,
                    "debug": false
                  }'></select>

Select Self-Populate + Linked

Preview
HTML

The first select (Country List) is self populated on page load.
If a Country is marked as selected (json sample file), the the second select (State List) is triggered automatically (using the selected Country value).

This chain can go endlessly, with unlimited selects one after another (or multiple linked)

                
                  <select class="form-select mb-3" data-sow-select='{
                    "source": "../demo.files/json/country/country_list.json",
                    "selfAutoPopulate": true,
                    "linkWith": "#state_list2",
                    "debug": false
                  }'></select>

                  <select disabled id="state_list2" class="form-select mb-3" data-sow-select='{
                    "source": "../demo.files/json/country/state_list/us.json",
                    "selfAutoPopulate": false,
                    "debug": true
                  }'>
                    <option value="0" selected>Select country first...</option>
                  </select>