This project has moved. For the latest updates, please go here.

Change Drop down options based on selected value

Apr 14, 2015 at 2:42 PM
Hey!
I want to change the options of my Dropdown field based on the selected value of another dropdown field.
I couldn't find any solution to do that yet. Can you help me out??

Thanks very much in advance!
Coordinator
Apr 20, 2015 at 3:05 PM
Haven't had time to test this but wanted to post my thoughts real quick. There are a variety of different ways to do this in JavaScript but here is one example:
var field = SPUtility.GetSPField('My Dropdown Field');
$(field.Dropdown).append('<option value="zebra">Zebra</option>');
Marked as answer by MELY on 4/21/2015 at 12:19 AM
Apr 21, 2015 at 8:20 AM
Perfect, works great:

var changeDropdown = function() {

if(plattform.GetValue() === 'CV1-Golden Games')
{

$(modell.Dropdown).empty();
$(modell.Dropdown).append('<option value="CV1.1">CV1.1</option>', '<option value="CV1.2">CV1.2</option>');
}

else if(plattform.GetValue() === 'CV2-Golden Games')
{
$(modell.Dropdown).empty();
$(modell.Dropdown).append('<option value="CV2.1">CV2.1</option>', '<option value="CV2.2">CV2.2</option>');
}
};

$(plattform.Dropdown).on('change', changeDropdown);
Thank you very much!
Marked as answer by MELY on 4/21/2015 at 12:20 AM
Apr 19, 2016 at 8:11 PM
So I'm using the above method to add choices to a Dropdown option. However, I keep getting an error message when I submit the form. Could this be an issue with the browser or server? I don't have high enough admin access to trace the error with the Unique ID, so I was wondering if anyone else had experienced this.
$(document).ready(function ()
{
    var field_1 = new SPUtility.GetSPField('Option_1');
    var field_2 = new SPUtility.GetSPField('Option_2');

    var option_1 = ["", "Item 1 1", "Item 1 2"];
    var option_2 = ["", "Item 2 1", "Item 2 2"];

    var addOptions = function(fieldToAdd, itemsToAdd)
    {
        var field = fieldToAdd;
        var items = itemsToAdd;
        for(i = 0; i < items.length; i++)
        {
            var curItem = items[i].toString();
            var curItemVal = curItem;
            for(j = 0; j < curItemVal.length; j++)
            {
                curItemVal = curItemVal.replace(" ", "_");
            }
            window.alert(curItemVal);
            $(field.Dropdown).append('<option value=' + curItemVal + '>' + curItem + '</option>');
        }        
    };

    $(field_1.Dropdown).empty();
    $(field_2.Dropdown).empty();

    addOptions(field_1, option_1);
    addOptions(field_2, option_2);

    $(field_1.Dropdown).append('<option value="Test">Test</option>');

    $(field_1.Dropdown).change(function()
    {
        window.alert(field_1.GetValue());
    });

    $(field_2.Dropdown).change(function()
    {
        window.alert(field_2.GetValue());
    });
});
Coordinator
Apr 20, 2016 at 3:12 AM
I think you are pretty close. You were missing quotes for your option element and I tweaked your code a bit.

Try this:
$(document).ready(function () {
   try {
      var field_1 = new SPUtility.GetSPField('Option_1');
      var field_2 = new SPUtility.GetSPField('Option_2');

      var option_1 = ["", "Item 1 1", "Item 1 2"];
      var option_2 = ["", "Item 2 1", "Item 2 2"];

      function addOptions(fieldToAdd, itemsToAdd) {
         var field = fieldToAdd;
         var items = itemsToAdd;
         for(var i = 0; i < items.length; i++) {
            // do you really want to replace spaces? if so, here is an easier way:
            // items[i].replace(/ /g, "_")
            // "Item 2 2" --> "Item_2_2"
            $(field.Dropdown).append('<option value="' + items[i] + '">' + items[i] + '</option>');
         }
      }

      $(field_1.Dropdown).empty();
      $(field_2.Dropdown).empty();

      addOptions(field_1, option_1);
      addOptions(field_2, option_2);

      //$(field_1.Dropdown).append('<option value="Test">Test</option>');

      $(field_1.Dropdown).change(function() {
         window.alert(field_1.GetValue());
      });

      $(field_2.Dropdown).change(function() {
         window.alert(field_2.GetValue());
      });
   } catch (e) {
      console.log("ERROR:", e)
   }
});
Apr 20, 2016 at 1:42 PM
Still getting the error message. The reason I was replacing the spaces with underscores is because when I was checking results with field.GetValue() I was only getting up until the first space. My actual list items are categories that include phrases. So I was storing the value with underscores and the user only sees the original phrase.

Is there any way to access the "Save" button? I found some code to change it from "Save" to whatever other word you wanted, but I can't make it trigger a function. I tried using SharePoint designer, but the block of code referenced in some of my Google results isn't there. I was going to store the values in a hidden freeform single-line field and set the values in the dropdowns to some default value as a temporary solution for the sake of time. The code executes perfectly until I actually go to save the form. I was hoping to modify the below code to trigger a function using "inputcontrols", but that's not working.

Code to change "Save" button:
var inputcontrols = document.getElementsByTagName("input");

for(i = 0; i<inputcontrols.length; i++)
{
    if(inputcontrols[i].type == "button" && inputcontrols[i].value == "Save")
    {
        inputcontrols[i].value = "Submit";
    }
}
Coordinator
Apr 20, 2016 at 2:10 PM
Can you tell me what the error message is? It might help to press F12 to open the Developer Tools console and get the error messages from there.

re: underscores, right that is what I thought. You shouldn't need that code anymore now that we fixed the quotes.

re: save button. There is a method you can override to add your own behavior for the save button. Google PreSaveAction.
function PreSaveAction() {
   if (something) {
      return false; // don't save
   }
   return true; // ok to save!
}
A warning about SharePoint Designer... if you use it to rearrange the list form fields then SPUtility might not work.
Apr 20, 2016 at 6:26 PM
I tried it with and without quotes (prior to posting) and for some reason I still get the error.

I had found PreSaveAction via Google (again, prior to posting), but I had it inside the document.ready function. Now that I've moved it outside, it works like a charm. :)

I don't normally like SharePoint designer either, but some Google results suggested using it to access/edit PreSaveAction.