Question

这是一个动态生成文本框和下拉列表的脚本。

var ss = $('#ss');
$('#SubGrpId').change(function () {
    $('#ss').empty();
    $.ajax({
        url: '@Url.Action("FillItem", "Item")', // dont hard code your url's
        type: "GET",
        dataType: "JSON",
        data: { MnId: $('#MainGrpId').val(), SbId: $(this).val() }, // pass the selected value
        success: function (y) {
            alert("Im in");
            $.each(y, function (l, u) {
                // add the label
                var label = u.Name;
                var name = 'Field' + l;
                var label = $('<label></label>').text(label).attr('for', name);
                ss.append(label);
                if (u.Options.length==0) {
                    // There is only one item and its for generating a textbox
                        var input = $('<input>').attr({ type: 'text', id: name, name: name });
                    ss.append(input);
                } else {
                    // Its a select
                    var select = $('<select></select>').attr({ id: name, name: name });
                    // add each option
                    $.each(u.Options, function (i, option) {
                        select.append($('<option></option>').val(option.Value).text(option.Text));
                    })
                    ss.append(select);
                }
            });
            var labelAdd = $("<label id='lblId'>").text('Refresh');
            ss.append(labelAdd);
        },
        error: function () {
            alert("something wrong");
        }
    });
});

简要查看

@using (@Html.BeginForm("Save", "Item"))
{
   <div id="ss" class="col-md-6">

   </div>

   @Html.TextBoxFor(a=>a.ItemName, new { Class = "form-control", placeholder = " Item Name", TextMode = "MultiLine2", onkeyup = "return validateChar(this)", style = "width:175px;height:25px;" })

   <input type="submit" value="Save" class="btn btn-success" /> 
}

现在我想将texbox中的文本和选定项目的ddls文本转换为'ItemName'文本框，用空格分隔。当用户开始输入文本框时，文本应开始绑定到“ItemName”文本框。如果用户从ddl中选择一个项目，让我们说“itemThree”，那么该文本应该以空格分隔添加到文本框中。这就是我所做的。

$('#ss').on( function () {
    if ($('#Field0').is('input')) {
        var f1 = $('#Field0').val();
    }
    else {
        var f1 = $('#Field0 option:selected').text();
    }

    if ($('#Field1').is('input')) {
        var f2 = $('#Field1').val();
    }
    else {
        var f2 = $('#Field1 option:selected').text();
    }
    ....
        $('#ItemName').val(f1 +" "+ f2 +" "+ f3....);

});

但是这个脚本不起作用。这不会将文本框的文本和ddls的选定项文本绑定到“ItemName”文本框。我以这种方式编写上述脚本，因为作为示例，id（'Field1'）可以是文本框或ddl。所以我检查了两种情况。任何人都可以帮我这个。谢谢！

Answer 1

您遇到的主要问题是，将事件处理程序绑定到文本框中的更改或下拉列表中的更改（选择）。

以下是您需要做的事情：

1.首先，为动态创建的文本框和下拉控件添加一个类名，如下所示（唯一的变化是添加了class属性，这用于buildValues函数中的选择器）

var input = $('<input>').attr({ type: 'text', id: name, name: name, class:"field" });
var select = $('<select></select>').attr({ id: name, name: name, class:"field" });

2.接下来，在将所有内容附加到ss之后，您需要添加事件处理程序，如下所示，其中buildValues是事件处理程序。

var labelAdd = $("<label id='lblId'>").text('Refresh');
ss.append(labelAdd);
$(".field").on("change", buildValues);

3.最后，这里是根据您的要求构建值的事件处理程序：

function buildValues(){
var txtValues = [];
$("input.field").each(function(){
txtValues.push($(this).val());
});
$("select.field").each(function(){
txtValues.push($(this).find("option:selected").text());
});

$("#ItemName").val(txtValues.join(" "));
}

检查'input'和'select'jQuery

1 个答案: