点击列表框,用javascript在textarea中添加选中的项目名称

Clicking on listbox append the selected item name in textarea with javascript

本文关键字:添加 项目 textarea 列表 javascript      更新时间:2023-09-26

USING: ASP。净MVC 4.0 VS2010 , .netfw 4.0

my controller包括:

        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);

my view class:

  @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。textarea(类textarea)将被填充/textarea +=选中的列表项"。

Microsoft JScript运行时错误:Object expected

您可以通过在change事件上运行它并获取当前值来简化jQuery。它还应该解决未找到对象的问题。试试这个:

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