Проверка «ввода» и «выбор» jQuery

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

Теперь я хочу, чтобы получить текст в texboxes и текст выбранного элемента из DDL, в текстовое поле «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.First, добавить имя класса для динамически создаваемых TextBox и раскрывающихся управления следующим образом (единственное изменение является добавление атрибута класса, это используется для селектор в функции 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.Next, только после того, как вы приложили все к сс, вам нужно добавить обработчик событий следующим образом, где buildValues ​​является обработчиком события.

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

3.Finally, вот обработчик события, который будет строить значения в соответствии с вашими требованиями:

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(" ")); 
}