如何通過Javascript從選擇列表中添加具有值的HTML文本字段

Question

我有這樣的選擇列表：

 $.fn.optionTest = function(opts) { var option = $.extend({}, $.fn.optionTest.defaults, opts); $(this).change(function() { option.holderObject = $(this); if (option.clearOnChange) { $(option.actionId).empty(); } var val = $(this).val(); if ($.fn.optionTest.isArray(val)) { $.fn.optionTest.parseArray(val, option); } else { var label = $(this).children("option:selected").eq(0).text(); $.fn.optionTest.parseContent(val, option, label); } $('.' + option.removeLinkOptions.class).click(function(event) { $.fn.optionTest.removeRow(this, option); event.preventDefault(); }); $("[type=date]").datepicker({ monthNamesShort: $.datepicker.regional["en"].monthNames, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', yearRange: "-116:+10", }); return this; }); }; $.fn.optionTest.isArray = function(val) { return Object.prototype.toString.call(val) === '[object Array]'; }; $.fn.optionTest.defaults = { clearOnChange: false, actionId: '#action', indexOptions: { class: 'field-style field-split25 align-left' }, rowOptions: { class: 'certificates', type: 'text', name: 'CertificateType[]', tag: 'ul' }, CertNoOptions: { name: 'CertNo[]', type: 'text', placeholder: 'Cert No.', size: 20, class: 'field-style field-split25 align-left' }, PlaceofIssueOptions: { name: 'PlaceofIssueCert[]', type: 'text', placeholder: 'Place of Issue', size: 20, class: 'field-style field-split25 align-left' }, fromOptions: { name: 'FromCert[]', type: 'date', placeholder: 'Date of Issue', size: 20, class: 'field-style field-split25 align-left' }, toOptions: { name: 'ToCert[]', type: 'date', placeholder: 'Date of Expire', size: 20, class: 'field-style field-split25 align-left' }, labelOptions: { class: 'field-style field-split25 align-left', type: 'text' }, removeLinkOptions: { class: 'removeRow', href: 'javascript:;' } }; $.fn.optionTest.parseArray = function(vals, options) { var selectedOptions = options.holderObject.children("option:selected"); console.log(selectedOptions.eq(0).html()); $.each(vals, function(key, val) { $.fn.optionTest.parseContent(val, options, selectedOptions.eq(key).text()); }); }; $.fn.optionTest.removeRow = function(elem, options) { var row = $(elem).closest(".certificates"); row.remove(); $.fn.optionTest.updateRowIndex(options); }; $.fn.optionTest.updateRowIndex = function(options) { $("." + options.rowOptions.class).each(function(key, value) { var index = key + 1; $(value).attr('rowdataid', index); $(value).children("." + options.indexOptions.class).html(index); }); }; $.fn.optionTest.createColumn = function(content) { var li = $('<li>'); return li.append(content); } $.fn.optionTest.parseContent = function(val, options, label) { var index = $('.' + options.rowOptions.class).length + 1; var rowData = $.extend({}, options.rowOptions); var indexData = $.extend({}, options.indexOptions); rowData.rowDataId = index; var CertNoData = $.extend({}, options.CertNoOptions); CertNoData.name = CertNoData.name; var PlaceofIssueData = $.extend({}, options.PlaceofIssueOptions); PlaceofIssueData.name = PlaceofIssueData.name; var DateofIssueData = $.extend({}, options.DateofIssueOptions); DateofIssueData.name = DateofIssueData.name; var DateofExpireData = $.extend({}, options.DateofExpireOptions); DateofExpireData.name = DateofExpireData.name; var fromData = $.extend({}, options.fromOptions); fromData.name = fromData.name; var toData = $.extend({}, options.toOptions); toData.name = toData.name; var start_by = "<li><ul class='column'><li>"; var end_by = "</li></ul></li>"; var labelData = $.extend({}, options.labelOptions); if ($('#' + rowData.id).length == 0) { var tag = "<" + rowData.tag + ">"; delete rowData['tag']; var row = $(tag, rowData); var id = $('<li>', indexData).html(index); //var label = $('<li>', labelData).html(label); var label = $.fn.optionTest.createColumn($("<input>", labelData)); label = $(start_by + $(label).html() + end_by); var CertNo = $.fn.optionTest.createColumn($("<input>", CertNoData)); CertNo = $(start_by + $(CertNo).html() + end_by); var PlaceofIssue = $.fn.optionTest.createColumn($("<input>", PlaceofIssueData)); PlaceofIssue = $(start_by + $(PlaceofIssue).html() + end_by); var DateofIssue = $.fn.optionTest.createColumn($("<input>", DateofIssueData)); DateofIssue = $(start_by + $(DateofIssue).html() + end_by); var DateofExpire = $.fn.optionTest.createColumn($("<input>", DateofExpireData)); DateofExpire = $(start_by + $(DateofExpire).html() + end_by); var from = $.fn.optionTest.createColumn($("<input>", fromData)); from = $(start_by + $(from).html() + end_by); var to = $.fn.optionTest.createColumn($("<input>", toData)); to = $(start_by + $(to).html() + end_by); var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X")); removeRow = $($(removeRow).html()); // row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow); row.append('<input type="hidden" name="RowCertificateType[]" value="' + val + '" />').append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow); $(options.actionId).append(row); } }; $(document).ready(function() { $('#options').optionTest({ actionId: '.action2', clearOnChange: false }); }); 

  <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <fieldset class="fieldset-borders"> <legend>6. Certificates</legend> <ul class="header"> <li> <select id='options' name="CertificateType[]" class="field-style div-format align-left"> <option selected disabled value="0">Select certificates</option> <option value="1">Foo</option> <option value="2">Bar</option> <option value="3">OTHER</option> </select> </li> </ul> <div class="action2" ></div> </fieldset> 

如您所見，從列表中選擇任何選項后，它將添加一些字段。 我需要添加具有從選項中選擇的值的文本字段標簽。

作為示例，我有3個選項：

Foo
Bar
OTHER

如果我選擇Foo ，則應添加如下字段：

Foo [    ] [    ] [    ] [    ]

如果選擇Bar ，則應添加如下字段：

Bar [    ] [    ] [    ] [    ]

如果我選擇“ OTHER它將僅生成沒有值的空白字段：

[    ] [    ] [    ] [    ] [    ]

現在，它將為任何選定的選項添加所有空白字段。

如果我使用：

var label = $('<li>', labelData).html(label);

代替：

var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);

它添加帶有值的標簽字段，但不可編輯，不是文本字段，添加OTHER后不能更改。

您是否知道如何使用If獲得正確的語法？ 就像是：

If (option selected = 'OTHER') {

   var label = $.fn.optionTest.createColumn($("<input>", labelData));
   label = $(start_by + $(label).html() + end_by);

}
else {
   var label = $('<li>', labelData).html(label);
}

Answer 1

我不確定我是否理解您的問題，但是我認為您想要的是將所選標簽顯示為第一個輸入字段中的值，除非所選標簽為“ OTHER”，在這種情況下該字段應該沒有任何值屬性。

如果正確的話，我們可以通過擴展labelData對象來實現：

var labelData = $.extend({}, options.labelOptions, {
    value: ((label === 'OTHER') ? '' : label)
});