Problem with cascading dropdown javascript using

Question

We have a list with 3 cascading dropdown choices. Country-county-region are used as cascading columns. It works great until you change the county or region and save it. It is possible to make a new choice, but it doesn't save it. Everytime you'll get the old choices int your list. Here is a code snipped from our used script by using jquery-1.3.2.min.js & jquery.SPServices-0.5.6.min.js.

 $(document).ready(function() {
   $().SPServices.SPCascadeDropdowns({
     relationshipList: "{blablabla}",
     relationshipListParentColumn: "Land",
     relationshipListChildColumn: "Title",
     parentColumn: "Country",
     childColumn: "County",
     debug: true
       });
 });
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "{blablabla}",
   relationshipListParentColumn: "CCounty",
   relationshipListChildColumn: "Title",
   parentColumn: "County",
   childColumn: "Region",
   debug: true
  });

Did we forget something? Or how we can change the previously saved cascading columns?

Just for clarification, is it that when you make your three choices, and then maybe change one choice, the other choices don't reset? So if someone puts in "USA", "New York", "East Coast", and then changes the "USA" to "India", you want the other two options to disappear? — Brandon C.
– Brandon C., Commented Jun 18, 2014 at 7:34
Yes, thats the problem. If i change one option, the others doesn't disappear. If i change like your example USA to India than choose Mumbai and no region it doesn't change mit choice. After the save process you'll see in the list the USA choice. — Tiac
– Tiac, Commented Jun 18, 2014 at 7:50

Brandon C. · Accepted Answer · 2014-06-18 08:26:57Z

What you can do, is by simply using Javascript, you can reset the values based on the current option. Let's say we are using the example I posted in my comment. Suppose each country has three counties associated with it, and each county has three regions. You can write something like:

<script type="text/javascript">
  var country_DD = document.getElementByID("ID_of_country_DD");
  var county_DD = document.getElementByID("ID_of_county_DD");
  var region_DD = document.getElementByID("ID_of_region_DD");

  var value_of_Country_DD = country_DD.options[country_DD.selectedIndex].value;

  if (value_of_Country_DD == "USA")  {
    county_DD.options[county_DD.selectedIndex].value = "";  //Resets whatever user had before
    region_DD.options[region_DD.selectedIndex].value = "";
    county_DD.options[0].value = "New York";
    county_DD.options[0].innerHTML = "New York";
    county_DD.options[1].value = "Boston";
    county_DD.options[1].innerHTML = "Boston";
    county_DD.options[2].value = "Atlanta";
    county_DD.options[2].innerHTML = "Atlanta";
    region_DD.options[0].value = "R1";
    region_DD.options[0].innerHTML = "R1";
    region_DD.options[1].value = "R2";
    region_DD.options[1].innerHTML = "R2";
    region_DD.options[2].value = "R3";
    region_DD.options[2].innerHTML = "R3";
    }

  else if (value_of_Country_DD == "India")  {
    //Do the same .innerHTML stuff here too, just forgot the first time.  Too lazy.

    county_DD.options[county_DD.selectedIndex].value = "";  //Resets whatever user had before
    region_DD.options[region_DD.selectedIndex].value = "";
    county_DD.options[0].value = "Mumbai";
    county_DD.options[1].value = "Option2";
    county_DD.options[2].value = "Option3";
    region_DD.options[0].value = "Region1";
    region_DD.options[1].value = "Region2";
    region_DD.options[2].value = "Region3";
   }

 else {
    county_DD.options[county_DD.selectedIndex].value = "";  //Resets whatever user had before
    region_DD.options[region_DD.selectedIndex].value = "";
    county_DD.options[0].innerHTML = "";
    county_DD.options[1].innerHTML = "";
    county_DD.options[2].innerHTML = "";
    region_DD.options[0].innerHTML = "";
    region_DD.options[1].innerHTML = "";
    region_DD.options[2].innerHTML = "";
 }

</script>

Then attach this code to the country drop down item, and trigger the event however you would like. The code will reset the options and the current selected value whenever the user changes country.

In this way, if the user goes back to change an option with the intent to keep the others the same, the javascript will forceably change the current selected (or old values) to null, disallowing any mixing of regions.

Or, if looking at your JQuery, you already have the code to show what you want in the DD when the user picks and option, you can skip the majority of this code, and just trigger an event to when a user changes a value in the dropdown, you just use the county_DD.options[county_DD.selectedIndex].value = ""; stuff to make sure that the value of their old choice is set back to null.

Stack Exchange Network

Problem with cascading dropdown javascript using

1 Answer 1

Your Answer

Hot Network Questions

Problem with cascading dropdown javascript using

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions