0
添加HTML文本字段我有選擇列表如下：如何使用值從選擇列表中通過Javascript
$.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',
\t \t \t 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',
\t \t 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',
\t \t 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);
\t \t
\t \t \t //var label = $('<li>', labelData).html(label);
\t \t
var label = $.fn.optionTest.createColumn($("<input>", labelData));
label = $(start_by + $(label).html() + end_by);
\t \t
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);
\t \t 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"> \t
<li>
<select id='options' name="CertificateType[]" class="field-style div-format align-left">
\t \t \t <option selected disabled value="0">Select certificates</option>
\t \t \t <option value="1">Foo</option>
\t \t \t <option value="2">Bar</option>
\t \t \t <option value="3">OTHER</option>
</select>
</li>
</ul>
<div class="action2" ></div> \t
</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);
}