Select/Dropdownlist is not displaying

问题

I have 4 drop-down lists on my page but for some odd reason streetid is not visible when townid is visible I can't understand what the link is. Would really appreciate it if someone would be able to clarify the matter.

View Code

<h2>Create</h2>
<script language="javascript" type="text/javascript">
function GetRegions(_countryid) {
    var procemessage = "<option value='0'> Please wait...</option>";
    $("#regionid").html(procemessage).show();
    var url = "/Citizens/GetRegions/";

    $.ajax({
        url: url,
        data: { countryid: _countryid },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>Select Region</option>";
            for (var x = 0; x < data.length; x++) {
                markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            if (markup == "<option value='0'>Select Region</option>")
            {
                markup = "<option value='0'>No Region Data available for Country</option>";
            }
            $("#regionid").html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });

}
function GetTowns(_regionid) {
    var procemessage = "<option value='0'> Please wait...</option>";
    $("#townid").html(procemessage).show();
    var url = "/Citizens/GetTowns/";

    $.ajax({
        url: url,
        data: { regionid: _regionid },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>Select Town</option>";
            for (var x = 0; x < data.length; x++) {
                markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            if (markup == "<option value='0'>Select Town</option>") {
                markup = "<option value='0'>No Town Data available for Region</option>";
            }
            $("#townid").html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });

}
function GetStreets(_townid) {
    var procemessage = "<option value='0'> Please wait...</option>";
    $("#streetid").html(procemessage).show();
    var url = "/Citizens/GetStreets/";

    $.ajax({
        url: url,
        data: { townid: _townid },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>Select Street</option>";
            for (var x = 0; x < data.length; x++) {
                markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            if (markup == "<option value='0'>Select Street</option>") {
                markup = "<option value='0'>No Street Data available for Town</option>";
            }
            $("#streetid").html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });

}
</script>
@Using (Html.BeginForm())
@Html.AntiForgeryToken()

@<div class="form-horizontal">
    <h4>Citizen</h4>
    <hr />
    @Html.ValidationSummary(True, "", New With { .class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(Function(model) model.CountryId, "Country", htmlAttributes:=New With {.class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.DropDownList("CountryID", Nothing, htmlAttributes:=New With {.class = "form-control", .onchange = "javascript:GetRegions(this.value);"})
            @Html.ValidationMessageFor(Function(model) model.CountryId, "", New With {.class = "text-danger"})
        </div>
    </div>

     <div class="form-group">
         @Html.LabelFor(Function(model) model.RegionId, "Region", htmlAttributes:=New With {.class = "control-label col-md-2"})
         <div class="col-md-10">
            <select id="regionid" name="regionid" onchange="javascript:GetTowns(this.value);" >
                </select>

             @Html.ValidationMessageFor(Function(model) model.RegionId, "", New With {.class = "text-danger"})
         </div>
     </div>

     <div class="form-group">
         @Html.LabelFor(Function(model) model.TownId, "Town", htmlAttributes:=New With {.class = "control-label col-md-2"})
         <div class="col-md-10">
             <select id="townid" name="townid" onchange="javascript:GetStreets(this.value);" />
             @Html.ValidationMessageFor(Function(model) model.TownId, "", New With {.class = "text-danger"})
         </div>
     </div>

     <div class="form-group">
         @Html.LabelFor(Function(model) model.StreetId, "Street", htmlAttributes:=New With {.class = "control-label col-md-2"})
         <div class="col-md-10">
             <select id="streetid" name="streetid" />
             @Html.ValidationMessageFor(Function(model) model.StreetId, "", New With {.class = "text-danger"})
         </div>
     </div>


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
End Using

In Controller

 <HttpPost>
    Public Function GetRegions(CountryId As String) As ActionResult
        Dim regions = _db.Regions.Where(Function(r) r.CountryId = CountryId).ToList
        Dim slstRegions As New SelectList(regions, "Id", "Region1", 0)
        Return Json(slstRegions)
    End Function

    <HttpPost>
    Public Function GetTowns(RegionId As Integer) As ActionResult
        Dim towns = _db.Towns.Where(Function(t) t.RegionId = RegionId).ToList
        Dim slstTowns As New SelectList(towns, "Id", "Town1", 0)
        Return Json(slstTowns)
    End Function

    <HttpPost>
    Public Function GetStreets(TownId As Integer) As ActionResult
        Dim streets = _db.Streets.Where(Function(t) t.TownId = TownId).ToList
        Dim slstStreets As New SelectList(streets, "Id", "Street1", 0)
        Return Json(slstStreets)
    End Function

    ' GET: Citizens/Create
    Function Create() As ActionResult
        ViewBag.AddressId = New SelectList(GetMyAddresses(_db, User.Identity.GetUserId()), "Id", "House")
        ViewBag.NameId = New SelectList(_db.Names, "Id", "Name1")
        ViewBag.SurnameId = New SelectList(_db.Surnames, "Id", "Surname1")
        ViewBag.CountryId = New SelectList(_db.Countries.OrderBy(Function(c) c.country1), "Id", "Country1")
        Return View(New CitizenModel)
    End Function

回答1:

The only solution that I did find to my problem although not to my liking was to set something so it isn't blank

<select id="streetid" name="streetid" class="form-control">
    <option value="0">Select Country</option>
</select>

Then I just overwrite the value when I am applying JavaScript. If anyone has a cleaner solution please do tell me.

来源：https://stackoverflow.com/questions/26835394/select-dropdownlist-is-not-displaying