javascript - 单击列表框将所选项目名称附加到带有javascript的textarea中

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 。它还应该解决找不到对象的问题。尝试这个：

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