Выпадающий список MVC 4

Question

У меня есть раскрывающийся список, составленный простым способом. То, что я хочу сделать, это установить, когда будет выбран параметр «Другое», появится текстовое поле, и люди могут ввести то, что они хотят. Как я могу выполнить это с реализацией раскрывающегося списка, который у меня есть? Вот мой выпадающий список кода:

<div class="frm_label"> 
    @Html.LabelFor(Model => Model.JobTitle) 
</div> 
<div class="item"> 
    @Html.DropDownListFor(Model => Model.JobTitle, new SelectList(
           new List<object>{ 
            new { value = 0 , text = "Physician" }, 
            new { value = 1 , text = "Researcher" }, 
            new { value = 2 , text = "Clinical Staff" }, 
            new { value = 3 , text = "Other" }, 
           }, 
           "value", 
            "text", 
            0)) 
</div> 

Answer 1

Используйте это:

var dependentvalue = $('#JobTitle').val(); 
var field = $('#freetextfield'); 
     if (dependentvalue === "3") { 
      field.removeClass('hidden'); 
     }else{ 
       field.addClass('hidden');} 

где HTML как это:

<div class="hidden"> 
@Html.TextBoxFor(model => model.freetextfield) // create this property of type string 
</div> 

в контроллере, вы можете проверить, если значение из dropdownlist свойство для другого, а затем подтвердите это свободное текстовое поле.

CSS для .hidden:

.hidden { 
    display: none; 
    visibility: hidden; 
} 

Answer 2

я сделал что-то подобное не так давно, проверить этот fiddel http://jsfiddle.net/ItaySidis/QNXEZ/3/

Идея заключается в том, чтобы создать триггер, когда выберите изменения коробки в положение " другой ", тогда вы добавляете новое поле ввода с тем же именем, что и поле выбора, а также скрываете выбор и изменяете имя на пустую строку.

$('#jobTitle-select').change(function(){ 
    if($(this).val() == 3) { 
     var input = $('<input type="text" name="jobTitle" id="new-jobtitle" placeholder="Enter your job title..." />'); 
     $(this).attr('name','').addClass('hidden'); 
     $('#back-to-list').show(); 
     $(this).parent().append(input);    
    } 
}); 

Я также дал пользователю возможность вернуться назад и выбрать из списка, нажав на кнопку «вернуться к списку» пролетом, который делает прямо противоположное событие изменения.

$('#back-to-list').click(function(){ 
     $('#jobTitle-select').removeClass('hidden') 
     .attr('name','jobTitle') 
     .find('option:first') 
     .attr('selected','selected'); 
     $('#new-jobtitle').remove(); 
     $(this).hide(); 
    }); 

надеюсь, что это было ясно enough..play с fiddel вы получите идею