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 for .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();
    });

希望它足够清楚。与fiddel一起玩你会得到这个想法

下拉列表MVC 4

2 个答案: