javascript - 检查“输入”和“选择” jQuery

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

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" />
}

现在，我想在texboxes中获取文本，并将所选项目的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。
所以我检查了两种情况。任何人都可以帮我这个忙。谢谢！！

最佳答案

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

这是您需要做的：

1.首先，如下所示为动态创建的文本框和下拉控件添加类名称（唯一的变化是添加了类属性，该属性用于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(" "));
}

关于javascript - 检查“输入”和“选择” jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33251431/