Javascript } $(文档).ready(函数(){ $('button:contains(remove)').bind('click',函数(e){ e、 预防默认值(); var original\u select=document.getElementById('original'), 当前选中=原始选中。选中索引; 原始选择。删除(原始选择[当前选择]); 如果(原始选择选项长度){ 原始选择选项[current_selected
编辑:我将您的标记更改为Javascript } $(文档).ready(函数(){ $('button:contains(remove)').bind('click',函数(e){ e、 预防默认值(); var original\u select=document.getElementById('original'), 当前选中=原始选中。选中索引; 原始选择。删除(原始选择[当前选择]); 如果(原始选择选项长度){ 原始选择选项[current_selected,javascript,jquery,html,select,selectedindex,Javascript,Jquery,Html,Select,Selectedindex,编辑:我将您的标记更改为 <button>add/copy</button> <button>remove</button> 添加/复制 去除 您可以使用$(“重复选择:第一”)选择第一个选项,例如:$(“重复选择:第一”).append('Option#'+$(“重复选择:第一个选项”).length)$(“重复项选择:第一个选项”)。删除“选定项”$(“重复项选择:第一个选项:最后一个”).attr(“已选择”、“已选择”)对于add按钮,您
<button>add/copy</button>
<button>remove</button>
添加/复制
去除
您可以使用$(“重复选择:第一”)
选择第一个选项,例如:$(“重复选择:第一”).append('Option#'+$(“重复选择:第一个选项”).length)$(“重复项选择:第一个选项”)。删除“选定项”$(“重复项选择:第一个选项:最后一个”).attr(“已选择”、“已选择”)
对于add按钮,您是否可以发布您的代码(以最新的形式,您有问题)作为可能?这将加快对问题的调查并帮助其他人改进它。由于列表的大小会动态更改,因此选定选项的selectedIndex不再适用于新列表。不过,这给了我一个想法。谢谢这是您在JSFIDLE上的解决方案:如广告所示!如您所见,无论原始列表(添加/删除)如何操作,每个副本的selectedIndex都将保持不变。对不起,如果我在最初的问题中没有更清楚地说明这一点。谢谢大家!
<form>
<div id="duplicates">
<!--// Each of these select lists should maintain their currently selected index //-->
<select>
</select>
<select>
</select>
<select>
</select>
</div>
<div>
<!--// Using a generic function to capture each event //-->
<input type="button" value="add/copy" onClick="updateDuplicates('add');" />
<input type="button" value="remove" onClick="updateDuplicates('remove');" />
<select id="original">
</select>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function updateDuplicates(editMode){
///* Capture the selectedIndex of each select list and store that value in an Array *///
var original_select = document.getElementById('original');
var current_selected = new Array();
$("#duplicates").find("select").each(function(index, element) {
current_selected[index] = element.selectedIndex;
});
switch(editMode){
case "add":
var new_option = document.createElement('option');
new_option.text = 'Option #' + original_select.length;
new_option.value = new_option.text;
original_select.add(new_option);
original_select.options[original_select.options.length-1].selected = 'selected';
///* Traverse each select element and copy the original into it, then set the defaultSelected attribute for each *///
$("#duplicates").find("select").each(function(index, element){
$(element).html($("#original").html());
///* Retrieve the currently selected state stored in the array from before, making sure it is a non -1 value, then set the defaultSelected attribute of the currently indexed element... *///
if(current_selected[index] > -1){
element.options[current_selected[index]].defaultSelected = true;
}
});
break;
case "remove":
var current_index = original_select.selectedIndex;
original_select.remove(original_select[current_index]);
///* Thou shalt not remove from thine empty list *///
if(original_select.options.length){
original_select.options[current_index > 0?current_index - 1:0].selected = 'selected';
}
///* Traverse each select element and copy the original into it... *///
$("#duplicates").find("select").each(function(index, element){
$(element).html($("#original").html());
///* Avoid operating on empty lists... *///
if(original_select.options.length){
///* Retrieve the currently selected state stored in the array from before, making sure it is a non -1 value... *///
if(current_selected[index] > -1){
///* If the stored index state is less or equal to the currently selected index of the original... *///
if(current_selected[index] <= current_index){
element.options[current_selected[index]].defaultSelected = true;
///* ...otherwise, the stored index state must be greater than the currently selected index of the original, and therefore we want to select the index after the stored state *///
}else{
element.options[current_selected[index] - 1].defaultSelected = true;
}
}
}
});
}
}
</script>
</form>
(function () {
function updateDuplicates() {
$("#duplicates").find("select").html($("#original").html());
$('#duplicates select').each(function () {
var lastSelectedValue = $(this).data('lastSelectedValue');
$(this).val(lastSelectedValue || $(this).val());
});
}
$(document).ready(function () {
$('button:contains(remove)').bind('click', function (e) {
e.preventDefault();
var original_select = document.getElementById('original'),
current_selected = original_select.selectedIndex;
original_select.remove(original_select[current_selected]);
if (original_select.options.length) {
original_select.options[current_selected < original_select.options.length ? current_selected : current_selected - 1].selected = 'selected';
}
updateDuplicates();
});
$('button:contains(add/copy)').bind('click', function (e) {
e.preventDefault();
var original_select = document.getElementById('original'),
new_option = document.createElement('option');
new_option.text = 'Option #' + original_select.length;
new_option.value = new_option.text;
document.getElementById('original').add(new_option);
original_select.options[original_select.options.length - 1].selected = 'selected';
updateDuplicates();
});
$('#duplicates select').bind('change', function () {
$(this).data('lastSelectedValue', $(this).val());
});
} ());
} ());
<button>add/copy</button>
<button>remove</button>