当父下拉列表设置为默认值时清除所有下拉列表

Question

我有一个 dropdownlistfor 和以下按预期工作的代码（以及 StateId 的类似块）：

$('#CountryId').change(function () {
        $.getJSON('@Url.Action("StateList", "Manage")', {id: $('#CountryId').val()}, function (data) {
            var items = '<option value="">Select a State</option>';
            $.each(data, function (i, state) {
                items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
            });
            $('#StateId').html(items);
            $('#CityId').html('<option value="">Select a City2</option>');
        });
    });

但是，如果 Country 设置为默认值（在之前已设置为其他值之后），则不会触发更改并且不会发生任何事情（我理解为什么......并且我不想要/不需要 state 选项，如果这也会发生）。因此，我可以选择一个州和城市而没有国家（不好）。我想要完成的是当我的 CountryId 下拉列表设置为以下内容时：

<option value="">Select a Country</option>

那么应该会发生以下情况：

$('#StateId').html('<option value="">Select a State</option>');
$('#CityId').html('<option value="">Select a City</option>');

我只是不知道如何设置关于 CountryId 的第一部分。我该怎么做呢？我搞砸了$('#CountryId').val 和其他几个没有运气的人。

另外，如果我采用这种方法，如果 State 和 City 已经是默认值（例如，当用户之前没有在注册之前或注册中设置值时，它基本上会覆盖默认值）形式）？这有关系吗？有没有更好的办法？

非常感谢任何帮助。

Answer 1

你应该绑定change事件国家然后检查值，使用.val()更改state和country的下拉值。

$("#CountryId").on('click', function () {
    if($(this).val() == ''){
        $('#StateId').val('');
        $('#CityId').val('');
    }
});

    $(document).ready(function() {
      setTimeout(function() {
        $('select').val('')
      }, 2000)
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">Select a State</option>
  <option value="Whatever" selected>Whatever</option>
</select>