从后面的 C# 代码调用 javascript 函数

Question

我正在使用地理数据 API，它为我提供了世界上所有国家、州和城市的三个不同选择 Lists。

这些Lists 不能是服务器端。这些Lists 需要一些时间来加载选项。 我想从我的 C# 代码后面设置一个特定的国家、州和城市，就像在选择 Lists 中选择的那样。 我尝试使用clientScript 和scriptManager 来调用Javascript 函数，将国家、州和城市设置为选中状态，但两种方法都没有调用该函数。以下是我的代码：

选择Lists代码：

       <tr>              
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                Country:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="countryId" class="countries order-alpha"  name="country">
                    <option value="">Select Country</option>
                </select>
                <asp:HiddenField ID="countryValue" runat="server" />


            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                District:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="stateId" class="states order-alpha"  name="state">
                    <option value="">Select State</option>
                </select>
                <asp:HiddenField ID="stateValue" runat="server" />
            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                City:
            </td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="cityId" class="cities order-alpha"  name="city">
                    <option value="">Select City</option>
                </select>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script src="//geodata.solutions/includes/countrystatecity.js"></script>
                <asp:HiddenField ID="cityValue" runat="server" />
            </td>
        </tr>

Javascript 函数：

function fillCities(countryName, districtName, cityName)
{
    var country = document.getElementById("countryId")
    country.value = countryName;

    var district = document.getElementById("stateId")
    district.value = districtName;

    var city = document.getElementById("cityId")
    city.value = cityName;
}
</script>

Answer 1

假设您将代码后面的值分配给隐藏字段

countryValue.Value = "India";
stateValue.Value = "Maharashtra";
cityValue.Value = "Mumbai";
ScriptManager.RegisterStartupScript(this, this.GetType(), "com", "CallJavaScriptFun();", true);

然后调用javascript方法...上面的代码是从后面的代码中设置的...

 function CallJavaScriptFun() {

            var countryValue = document.getElementById('<% =countryValue.ClientID %>').value;//here you will get the value of hidden field and assign to client side id....in our case it should be "India" as Value
            var country = document.getElementById('countryId');
            country = countryValue;

            var districtName = document.getElementById('<% =stateValue.ClientID %>').value; 
            var district = document.getElementById("stateId")
            district.value = districtName;

            var cityName = document.getElementById('<% =cityValue.ClientID %>').value;
            var city = document.getElementById("cityId")
            city.value = cityName;
        }

所有隐藏字段countryValue,stateValue,cityValue都存储在 分别可变...

然后分配给客户端 id....

并且也关注这个答案....

How do I programmatically set the value of a select box element using JavaScript?

编辑后-

你必须把这个 javascript 函数放到 head 部分......看看这张图片......我已经测试过了......它工作正常......