Razor Select dropdown does not see Javascript function

[Ralph]

I am creating an MVC 5 app in VS 2013.

I have a master view that calls a partial view for a model. That partial view has several controls related to a "relationship", including a button for the user to click to create a record for a new organization with which we have a relationship in case that organization does not yet exist in our records.

When the user clicks the button, a Kendo modal window (partial view) pops up and display controls for the user to fill in for the new organization. One of those controls is a Razor @Html.DropDownListFor() which displays the cities and counties.

So far, so good.

The "city" dropdown (Razor @Html) has text in the pattern City;County. When the user selects a City/County, I want to put the city value into the city box (the same select, for now, but it could be a different control) and the county name into the the CountyName textbox.

The code for the DropDownList/(HTML Select) is

@Html.DropDownListFor(model => model.City, @CityCountySelectList, new
   {
       htmlAttributes = new
       {
           @class = "form-control",
           title = "Select city and county simultaneously",
           onchange = "javascript:GetStringElement(value, 0, ';')"
       }
   })


But the javascript is never called (based on my step-through debugging in Chrome). I have tried the JavaScript call with and without "javascript:" and put the GetStringElement function in various places to no avail:

1. @scripts on the main and calling view
2. <script> on the main and calling view
3. in the document.ready function for the modal window.
4. On a separate javascript file.
5. Inline in the onchange event.

The code to call the modal is:

            <div id="KendoOrgModal">
                <p>Don't see your organization in the list? <span id="new_org_btn" class="k-button">Add a new one</span></p>
                @*re: modal window scrolling against main window: http://www.telerik.com/forums/kendo-ui-window-disable-background-scrolling *@

                @(Html.Kendo().Window()
                .Name("new_org_window")
                @* CSS width determines total display width for controls *@
.HtmlAttributes(new { style = "width:64em; overflow:hidden;" })
                .Title("New Organization")
                .Content("loading form...")
                .LoadContentFrom("_Create", "Org")
                .Iframe(false)
                .Draggable()
                .Visible(false)
                .Resizable(opts => opts.Enabled(false))
                .Height(875)
                @* width property determines width of popup modal window *@
.Width(890)
                .Scrollable(false)
                .Events(events => events
                    .Close("on_org_window_close")
                )
                )

                <script>


                    function on_org_window_close(e)
                    {
                        var org_cmb = $("#EditModel_CRAOrgID").data("kendoComboBox")
                        org_cmb.dataSource.read();
                        org_cmb.refresh();
                    }

                    $(document).ready(function() {

                        $("#new_org_btn")
                            .bind("click", function() {
                                $("#new_org_window").data("kendoWindow").open();
                            });

                    });

                </script>
            </div>

How can I make the DropDownListFor call the JavaScript code?

[Ralph]

To answer my own question, thanks to my team leader:

The code for the dropdown
A. eschews the second reference to htmlAttributes
B. has no onchange code
C. has an ID different from any of the controls and model properties it will populate.
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label" })
    <div>
        @Html.DropDownList("geoSelector", @CityCountySelectList, new
           {
               id = "geoSelector",
               @class = "form-control",
               title = "Select city and county simultaneously",
            }
   )
@Html.HiddenFor(m => m.City)
@Html.HiddenFor(m => m.CountyName)
@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })

[end dropdown code]


The primary javascript goes at the end of the modal .cshtml code page. For debugging purposes, we moved the assignment-of-values-to-controls to the calling partial view (see further below):

<script>
        $(document).ready(function() {

            $('#geoSelector').on('change', function() {
                var original = this.options[this.selectedIndex].innerHTML; // or $(this).val()
                var elements = original.split(';');
                var cityText = elements[0];
                var countyText = elements[1];

                //It is easier to debug in Chrome if we call a function.
                SetGeoValues(cityText, countyText);

                //$('#State').val(cityText);
            });
        });
</script>


On the calling partial view, at the bottom after all other code:

<script>

    function SetGeoValues(cityText, countyText) {

        $("#City").val(cityText);
        $("#CountyName").val(countyText);
    }

   [other functions here for other purposes as needed]
</script>