10412

Cascading dropdown on Javascript

Question:

The cascading drop down works fine on the first one, does not recognize the second one. Missing something small here. I've tried a few options but the javascript does not attach to the second call. Is there a way to dynamically add it?

<label class="page1">Country</label> <div class="tooltips" title="Please select the country that the customer will primarily be served from"> <select id="country" name="country" placeholder="Phantasyland"> <option></option> <option>Germany</option> <option>Spain</option> <option>Hungary</option> <option>USA</option> <option>Mexico</option> <option>South Africa</option> <option>China</option> <option>Russia</option> </select> </div> <br /> <br /> <label class="page1">Location</label> <div class="tooltips" title="Please select the city that the customer is primarily to be served from."> <select id="location" name="location" placeholder="Anycity"></select> </div> <label class="page1">Country</label> <div class="tooltips" title="Please select the country that the customer will primarily be served from"> <select id="country" name="country" placeholder="Phantasyland"> <option></option> <option>Germany</option> <option>Spain</option> <option>Hungary</option> <option>USA</option> <option>Mexico</option> <option>South Africa</option> <option>China</option> <option>Russia</option> </select> </div> <br /> <br /> <label class="page1">Location</label> <div class="tooltips" title="Please select the city that the customer is primarily to be served from."> <select id="location" name="location" placeholder="Anycity"></select> </div>

Javascript:

jQuery(function($) { var locations = { 'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'], 'Spain': ['Barcelona'], 'Hungary': ['Pecs'], 'USA': ['Downers Grove'], 'Mexico': ['Puebla'], 'South Africa': ['Midrand'], 'China': ['Beijing'], 'Russia': ['St. Petersburg'], } var $locations = $('#location'); $('#country').change(function () { var country = $(this).val(), lcns = locations[country] || []; var html = $.map(lcns, function(lcn) { return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $locations.html(html) }); });

Answer1:

The problem is that you are using duplicate ID's on HTML elements. It is invalid to have the same ID on more than one element in an HTML document. You will also need to change the name attributes or else your form will only contain the values for the last elements.

You can add a class to your top level category select elements

<select id="country1" class="country" name="country1" placeholder="Phantasyland"> ... </select> <select id="country2" class="country" name="country2" placeholder="Phantasyland"> ... </select>

You can then add a property to your sub categories that links to the parent select element

<select data-parent="country1" name="location1" placeholder="Anycity"></select> <select data-parent="country2" name="location2" placeholder="Anycity"></select>

Then bind the handler to the country class

$('.country').change(function () { var id = $(this).attr('id'); var $locations = $('[data-parent=' + id + ']'); var country = $(this).val(), lcns = locations[country] || []; var html = $.map(lcns, function(lcn) { return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $locations.html(html) });

Recommend

  • select2 is not working
  • Android localize es-r419
  • Programmatically extract keywords from domain names
  • split working for-loop calling JSON in 2 parts with jquery/javascript
  • Aggregation of cartesian product of two hierachical trees using Java
  • Filtering the divs with data attributes with multiple checkboxes
  • Python Unicode in and out of IDE
  • Remove non-U.S. state data
  • PostgreSQL GROUP BY: SELECT column on MAX of another WHERE a third column = x
  • Dropdowns and JSON Objects and Binding the selected value
  • Extract value from multidimensional array and place in comma separated string
  • How to parse namespace XML in Chrome 24 and jQuery 1.8.2?
  • objective-c MPMoviePlayerViewController done button language
  • Add numeric values beside columns elements in pandas
  • JQuery not working in Ajax load page
  • Parent and Child tables - ensuring children are complete
  • How to map json to object using spring boot [duplicate]
  • ORA-01843: not a valid month
  • Build Settings : What changes should I do in the build settings so that on releasing the app it will
  • Enterprise Distribution signing - who does it and why?
  • Mvc Front-end and Mvc Back-end: wrong architecture? [closed]
  • Problem with Session State in Internet Explorer!
  • Convert a NameValueCollection to a dynamic object [closed]
  • C++ mySQL connector LINKER errors (Windows)
  • ember component based on model type
  • JSON response from my CFC is retunring HTML code
  • Single Table Inheritance in Rails 4
  • How to parse the geolocation json from google for lng and lat in objective-c
  • Google Analytics - Using Client ID as a custom dimension
  • How to resolve “ Multiplicity is not valid in Role” error?
  • Accessing Windows Azure Queues from client side javascript/jquery
  • WPF Listbox commands
  • Neo4j: Filter nodes based on aggregate function
  • Command line installation of Code Signing certificates, .p12 files, and mobileprovisions
  • Magento get URL before current
  • I18n locale disregarding fallbacks
  • How do I access an unhandled exception in an MVC Error view?
  • Google Custom Search with transparent background
  • vba code to select only visible cells in specific column except heading
  • To Get the radio button value in ruby on rails