c# cannot get HTML select option value in code behind

Question

I have two HTML select option on my page, one (named PrimaryArea) having fix option, another one(named SecondaryArea) will get option base on PrimaryArea selection.

<select id="PrimaryArea" style="width: 100px" required tabindex="4" runat="server" onchange="setSecondaryItem()">
    <option value="" disabled selected>Select....</option>
    <option value="A">CityA</option>
    <option value="B">CityB</option>
    <option value="D">CityC</option>
    <option value="E">CityD</option>
    <option value="F">CityE</option>
</select>
<select id="SecondaryArea" style="width: 100px" tabindex="5" runat="server" required onchange="setSchoolItem()">
    <option value="" disabled selected>select...</option>
</select>

Javascript code:

        function setSecondaryItem() {
            var select = document.getElementById("<%= SecondaryArea.ClientID %>");
            var length = select.options.length;
            for (j = length - 1 ; j >= 1 ; j--) {
                select.remove(j);
            }
            var js = JSON.stringify(<%= SecondaryTable %>);
            var js2 = JSON.parse(js);
            var len = js2.length;
            var i = 0;
            while (i < len) {
                if (js2[i].cd.substring(0, 1) == document.getElementById("<%= PrimaryArea.ClientID %>").value) {
                    var new_option = new Option(js2[i].ref_desc, js2[i].cd);
                    select.options.add(new_option);
                    i += 1;
                }
                else {
                    i += 1;
                }
            }
            select.options[0].selected = true;
        }

        function setSchoolItem() {
            var select = document.getElementById("<%= School.ClientID %>");
            var length = select.options.length;
            for (j = length - 1 ; j >= 1 ; j--) {j
                select.remove(j);
            }
            var js = JSON.stringify(<%= SchoolTable %>);
            var js2 = JSON.parse(js);
            var len = js2.length;
            var i = 0;
            while (i < len) {
                if (js2[i].region_Cd == document.getElementById("<%= SecondaryArea.ClientID %>").value) {
                    var new_option = new Option(js2[i].temple_nm, js2[i].temple_id);
                    select.options.add(new_option);
                    i += 1;
                }
                else {
                    i += 1;
                }
            }
            select.options[0].selected = true;
        }

both work fine. My problem here is when I click button to process on code behind, which I use C#, the value not return correctly.

protected void Submit_click(object sender, EventArgs args)
{
    string area = PrimaryArea.Value;  // --> area = "A"~"F"
    string area2 = SecondaryArea.Value;  // --area2 = 0  <-- should be value I put in but not 0
}

What I make wrong?

Answer 1

should be value I put in but not 0

Somehow in your JavaScript you must be setting the SecondArea with indexes instead of values. Debug the JavaScript to see where.