1

簡単な方法でまとめたドロップダウンリストがあります。私が探しているのは、オプション「その他」が選択されたときに設定することです。テキストボックスが表示され、人々は必要なものを入力できます。私が持っているドロップダウンリストの実装でこれを達成するにはどうすればよいですか? ここに私のドロップダウンリストのコードがあります:

<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>
4

2 に答える 2

2

これを使って：

 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>

コントローラーで、ドロップダウンリスト プロパティの値が別のものであるかどうかを確認し、このフリー テキスト フィールドを検証できます。

.hidden の css:

.hidden {
  display: none;
  visibility: hidden;
}
于 2013-09-19T15:56:41.940 に答える
0

少し前に似たようなことをしました。このフィデルをチェックしてください 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();
    });

それが十分に明確だったことを願っています..フィデルで遊んでください。アイデアが得られます

于 2013-09-19T17:02:06.390 に答える