1

私は非常に一般的なシナリオを達成しようとしていますが、選択できるオプションのリストが与えられた場合、最後のシナリオは「その他」と表示され、選択すると、ユーザーには「その他」を指定するための入力フィールドが表示されます。

私の場合、それは人の肩書きのリストです：

public List<string> TitleList
{
    get
    {
        return new List<string> { "Mr", "Mrs", "Miss", "Dr", "Other" };
    }
}

そして私がやろうとしているのはこれです：

@Html.DropDownListFor(m => m.Title, new SelectList(Model.TitleList), "Please select...") @Html.TextBoxFor(m => m.Title)

DropDownLisで[その他]が選択されている場合はモデルにTextBox値をバインドし、それ以外の場合はDropDownListで選択されているアイテムにバインドします。

これは、モデルにプロパティを追加せずに達成できますか？

4

3 に答える 3

1

より良い解決策は、2つのフィールドにバインドするのではなく、選択したアイテムをドロップダウンからバインドされたテキストボックスに巧妙なJavaScriptを使用してコピーすることです。

@Html.DropDownList("ddlTitle", new SelectList(Model.TitleList), "Please select")
@Html.TextBoxFor(m => m.Title, new { maxLength = 10 })

Javascript：

ToggleTitleFields = function () {
    var title, txtTitle;
    title = $('select#ddlTitle').val();
    txtTitle = $('input#Title');
    if (title === "Other") {
        txtTitle.val("");
        txtTitle.show();
        return txtTitle.focus();
    } else {
        txtTitle.hide();
        txtTitle.val(title);
        return $('span[data-valmsg-for="Title"]').empty();
    }
};

$(document).on("change", "select#ddlTitle", function(e) {
    return ToggleTitleFields();
});

これが誰かに役立つことを願っています

于 2012-05-31T09:34:17.573 に答える
0

クライアント側の解決策を見つけました：DropDownListから「name」属性を追加/削除します。これが私のコーヒースクリプトです：

ToggleTitleFields = () ->
    if $('select#Title').val() == "Other"
        $('select#Title').removeAttr('name')
    else
        $('select#Title').attr('name','Title')
于 2012-05-29T11:01:50.247 に答える
0

皇帝、

正直なところ、これは私が以前に対処しなければならなかったシナリオではありませんが、それでも良いシナリオです。このジレンマに直面し、JavaScriptソリューションの使用を許可された場合、他のテキストボックスが選択されたときに、以前は「非表示」のテキストボックスを表示していました。次に、ユーザーはこのtexboxに新しい値を入力する必要があります。フォーカスを失うと、選択リストにデータが入力されて選択されます。次に、フォームが送信されたときに、既存のモデルの一部としてこの新しい値がまだあります。

もちろん、他を選択するときにテキストボックスを表示するのと同様のロジックを実行することもできますが、今回は、httpostコントローラーのアクションに対して少しロジックを実行して、「その他」の項目が選択されたかどうかを判断し、「テキストボックス」からモデルにデータを入力します。価値。

もちろん、どちらのシナリオにも検証のヒープが必要ですが、原則として、どちらのアプローチも「機能」します。

于 2012-05-29T11:02:03.680 に答える