Question

我有一个表单，用户将选择城市。当用户选择城市时，城镇列表将更改为将其带到城镇。

我想删除未选定城市的城镇。

我有一个代码，但它不起作用：

       <div class="form-group">
            <label for="city">City :</label>
            <select name="city" id="city" class="form-control" required onchange="townChange()">
                @foreach (var cityItem in Model.cityList)
                {
                    <option value="@cityItem.Id">@cityItem.Name</option>
                }
            </select>
        </div>
        <div class="form-group">
            <label for="town">Town :</label>
            <select name="town" id="town" class="form-control" required>
                @foreach (var townItem in Model.townList)
                {
                    <option value="@townItem.Id" accesskey="@townItem.CityId">@townItem.Name</option>
                }
            </select>
        </div>

function townChange()
{
    var cityId = document.getElementById("city").value;
    var townlist = document.getElementById("town");
    for (var i = 0; i < townlist.length; i++) {
        if (townlist.options[i].accessKey == cityId)
            townlist.remove(i);
    }
}

Answer 1

您标记了jquery，但实际上并没有在代码中使用jquery。

如果您愿意尝试jquery，这样的事情应该有效，但我现在无法测试：

＆＃13;

$('#town option').each(function () {
  if ($(this).prop('accesskey') !== cityId) {
    $(this).remove();
  }
});

＆＃13;

Answer 2

用这个替换你的循环。

for (var i = 0; i < townlist.length; i++) { if (townlist.options[i].accesskey == cityId) townlist.remove(i); }

Answer 3

document.getElementById("town")你正在循环使用这个元素本身你需要遍历select元素的options。试试这个功能

function townChange()
{
    var cityId = document.getElementById("city").value;
    var townlist = document.getElementById("town");
    var options = townlist.options;
    for (var i = 0; i < options.length; i++) {
        if (townlist.options[i].accessKey != cityId)
        {
            townlist.remove(i);
        }
    }
}

如何使用javascript更改HTML选择项目

3 个答案: