嗯，我在处理它时没有看到你的更新......但是更新了
https://jsfiddle.net/p76L4327/7/
这里是html你可以
<body>
<select id='options'>
<option value="0">Select an option</option>
<option value="1">Option A</option>
<option value="2">Option B</option>
<option value="3">Option C</option>
<option value="4">Option D</option>
</select>
<form action="">
<div id="action2">
</div>
<div id='submit'>
<br>
<input type="submit" value="Submit">
</div>
</form>
</body>
这里是插件选项测试
$(function() {
$.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();
});
return this;
});
};
$.fn.optionTest.isArray = function(val) {
return Object.prototype.toString.call(val) === '[object Array]';
};
$.fn.optionTest.defaults = {
clearOnChange: false,
actionId: '#action',
indexOptions: {
class: 'row-index'
},
rowOptions: {
id: 'option',
class: 'test-css',
tag: 'tr'
},
fromOptions: {
name: 'from',
type: 'text',
value: 'from',
size: 20
},
toOptions: {
name: 'to',
type: 'text',
value: 'to',
size: 20
},
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).parent().closest(options.rowOptions.tag);
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 td = $('<td>');
return td.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;
rowData.id = rowData.id + '-' + val;
var fromData = $.extend({}, options.fromOptions);
fromData.name = fromData.name + '-' + val;
fromData.id = fromData.id + '-' + val;
var toData = $.extend({}, options.toOptions);
toData.name = toData.name + '-' + val;
if ($('#' + rowData.id).length == 0) {
var tag = "<" + rowData.tag + ">";
delete rowData['tag'];
var row = $(tag, rowData);
var id = $('<td>', indexData).html(index);
var label=$('<td>').html(label);
var from = $.fn.optionTest.createColumn($("<input>", fromData));
var to = $.fn.optionTest.createColumn($("<input>", toData));
var removeRow = $.fn.optionTest.createColumn($("<a>", options.removeLinkOptions).text('remove Row'));
row.append(id).append(label).append(from).append(to).append(removeRow);
$(options.actionId).append(row);
}
};
});
//Running The Plugin
/**
Here is the Options
{
clearOnChange:false ,
actionId:'#action',
rowOptions:{
id:'option',
class:'test-css'
},
fromOptions:{
name:'from',
type:'text',
value:'from',
size:20
},
toOptions:{
name:'to',
type:'text',
value:'to',
size:20
}
};
**/
$(document).ready(function() {
$('select').optionTest({
actionId: '#action2',
clearOnChange: false
});
});
这里是插件的选项
{
clearOnChange: false,
actionId: '#action',
rowOptions: {
id: 'option',
class: 'test-css'
},
fromOptions: {
name: 'from',
type: 'text',
value: 'from',
size: 20
},
toOptions: {
name: 'to',
type: 'text',
value: 'to',
size: 20
},
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
}
你可以编辑改变一些东西..清除代码..太多的工作在它上面..但我希望你可以自己添加更多的选项和功能..
祝你好运