javascript - リストボックスをクリックすると、選択したアイテム名がテキストエリアにjavascriptで追加されます

Question

使用: ASP.Net MVC 4.0、VS2010、.netfw 4.0

私のコントローラーは以下で構成されています：

        ViewBag.HtmlContent = model.Content;
        ViewBag.list = model.TableColumn;

        try
        {
            HtmlString hs = new HtmlString(model.Content);
            List<string> lstItems = new List<string>();
            //IEnumerable<string> lst = new IEnumerable<string>();
            string queryToGetAllTable = "select column_name,* from information_schema.columns where table_name = 'BAP_AXA_IN' order by ordinal_position ";
            DataTable dt = CS.Return_DataTable(queryToGetAllTable);
            foreach(DataRow dr in dt.Rows)
            {
                lstItems.Add(dr["COLUMN_NAME"].ToString());
            }
            model.TableColumn = new List<string>();
            foreach( string  str in lstItems)
                model.TableColumn.Add(str);
        }

        catch { }
        return View(model);

私のビュークラス:

  @model AboutModel
@using MvcApplication1.Models

@{
    ViewBag.Title = "BAP Automation";
}

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Create Mail</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.CompanyName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CompanyName)
        @Html.ValidationMessageFor(model => model.CompanyName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.MailSubject)
    </div>

    <div class="editor-field">
        @Html.EditorFor(model => model.MailSubject)
        @Html.ValidationMessageFor(model => model.MailSubject)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.MailBody)
    </div>

    <div class="editor-field">
        @Html.EditorFor(model => model.MailBody)
        @Html.ValidationMessageFor(model => model.MailBody)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.TableColumn)
    </div>

    <div class="editor-list-field">
        @Html.ListBoxFor(model => model.TableColumn, new SelectList(Model.TableColumn), new { @class = "listofcolumn"}))
        @Html.ValidationMessageFor(model => model.TableColumn)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Content)
    </div>

    <div class="editor-multiline-field">
        @Html.TextAreaFor(model => model.Content, new { cols=60,@rows=10, @class = "textarea"})
        @Html.ValidationMessageFor(model => model.Content)
    </div>

        <p>
            <input type="submit" value="Create" />
        </p>

        <p>
            Posted Content : @ViewBag.HtmlContent
        </p>

    </fieldset>
}
<script type="text/javascript">
$(function() {
    ​$('.listofcolumn option')​.click(function() {
        if ($(this).is(':selected')) {
            var selectedId = $(this).val();
            var selectedText = $(this).text();
            $('.textarea').val(selectedText);
        }
    });​
});
</script>

「listbox(class = listofcolumn)をクリックすると、html.textareafor(class textarea) が入力されます/ textarea += 選択されたリスト項目」.

しかし、実行時に次のエラーが表示されます: Microsoft JScript ランタイム エラー: オブジェクトが必要です

Answer 1

changeイベントでjQueryを実行し、現在の値を取得することで、jQueryを簡略化できます。また、オブジェクトが見つからないという問題も解決するはずです。これを試して：

​$('.listofcolumn')​.change(function() {
    var selectedId = $(this).val();
    var selectedText = $('option:selected', this).text();
    $('.textarea').val($('.textarea').val() + ' ' + selectedText);
});​