отображение раскрывающегося списка или текстового поля в зависимости от значения родительского раскрывающегося списка asp.net mvc2 jquery

Question

У меня есть выпадающий список со списком названий стран, когда пользователь выбирает США, я показываю ему список государств в другом выпадающем списке. Эту функцию я могу сделать - аналогично заполнению раскрывающегося списка с использованием MVC2 на основе другого раскрывающегося списка (каскадный DropDownList)

Но если пользователь выбирает какую-то другую страну, я хочу показать ему текстовое поле, чтобы он мог ввести название штата.

Как мне это сделать? Кто-нибудь видел что-то подобное на каком-либо сайте?

Любая помощь будет искренне оценена

С уважением Арнаб

Answer 1

Отказ от ответственности: я не в курсе инструментария ASP.NET MVC Framework, поэтому мой подход по умолчанию может быть более ручным, чем другие варианты. Однако ...

Что вы можете сделать, это добавить текстовое поле и раскрывающийся список на страницу и скрыть текстовое поле по умолчанию. Похоже на это:

<div id="firstDropDown">
  <!-- ASP.NET markup for the first dropdownlist -->
</div>
<div id="secondDropDown">
  <!-- ASP.NET markup for the second dropdownlist -->
</div>
<div id="conditionalTextBox">
  <!-- ASP.NET markup for the conditional textbox -->
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('#conditionalTextBox').hide();
  });
</script>

С точки зрения сервера все элементы управления отображаются на странице очень хорошо, ваш код на стороне сервера не должен знать разницу. Затем вы добавите событие на стороне клиента в свой первый выпадающий список, чтобы проверить конкретные значения и соответственно отобразить / скрыть элементы управления:

$('#<%= firstDropDownList.ClientID %>').change(function() {
  // add logic here to compare $(this).val() with known values
  // (populated from the server-side during view rendering of course)
  // and if the value matches known values for changing the controls:
  $('#secondDropDown').hide();
  $('#conditionalTextBox').show();
});