Update Dropdown in CMS?

Silverstripe Version: 4.7

I have a front-facing form where visitors can join a website. It’s an international site, We ask for their address and try to simplify the joining process by providing lists of provinces or states for some countries. People from other countries can type in their region or state.

I make this happen on the front end by a bit of AJAX. If the visitor’s selected country is in a list, I return a dropdown list with the provinces/states, otherwise I return a blank text field. That works.

Now I’ve been asked to do the same thing inside the CMS.

I have a DataExtension on the Member table.

with a modified updateCMSFields()

[code]

public function updateCMSFields(FieldList $fields){

    Requirements::javascript("app/src/js/MemberExtension.js");
    $fields->push(CountryDropdownField::create('Country', 'Country', [])->addExtraClass("Country_lst"));
    $fields->push(DropdownField::create('State', 'State/Province')->setEmptyString("select one"));

in my .js, I have

jQuery.noConflict();
(function($) {

    $(document).ready(function(){

        $(".Country_lst").click(function(e){

            var selected = $(this).find(":selected").val();

            $.ajax({
                url: "home/getStatesListSimple",
                type: 'POST',
                data: {
                    "country": selected
                },
                success: function (response) {
                    //document.getElementById("Form_ItemEditForm_State").innerHTML =response;
                    $("#Form_ItemEditForm_State").html(response);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus); alert("Error: " + errorThrown);
                }
            });
        });
    });
}(jQuery));

The jquery and AJAX work. If I look at the CMS page with Developer Tools, I can see all the states for the selected country. BUT, no matter what I do, I cannot get the results to display or save.

If I take Developer Tools and manually set a select option to “selected” and hit “Save”, the CMS responds that whatever I have chosen is not among the allowed values.

So my question is: how can I populate the select via AJAX and make it work and also, how do I change the field from a DropdownField to a TextField if necessary?

I can probably create a dummy dropdown and use AJAX to put its selected value into a HiddenField but this feels like a kludge and I would like to do things the correct way.

Have you tried a third-party module?
This may work for you: GitHub - sheadawson/silverstripe-dependentdropdownfield: A silverstripe dropdown field that has it's options populated via ajax, based on the value of the field it depends on

No, I thought it would’ve been simpler. Good idea though, and thanks for the link. I’ll have a go with that.

Use this widget to ask the user a question and give the user the opportunity to select only one of many predefined answers.

The SilverStripe 4 backend uses chosen.js to improve the UI on its Dropdown fields. If this is applied to your dropdown, the <select> element you are updating is no more used: you should see a <div class="chosen-container"> after the now hidden <select> element.

If this is the case, retriggering chosen on your element should fix the issue, e.g.

// At the end of your $.ajax.success function
$("#Form_ItemEditForm_State").chosen()