我想实现以下功能。
将有“n”个“选择”标签,并且在选择值(在更改事件时)时,所选值将从其他“选择”标签中删除。如果用户再次更改当前选定下拉列表中的值,我想在其原始位置的其他“选择”标签中添加先前选定的值。
我能够删除部分并部分附加部分。(需要在其原始位置附加先前的值。)
HTML:
<div class="container">
<input id="preval" class="hidden" type="text" value="" name=""/>
<select class="selectoption">
<option value="1">1</option>
<option value="ab">ab</option>
<option value="xysd">xysd</option>
<option value="4">4</option>
</select>
</div>
<div class="container">
<select class="selectoption">
<option value="1">1</option>
<option value="ab">ab</option>
<option value="xysd">xysd</option>
<option value="4">4</option>
</select>
</div>
<div class="container">
<select class="selectoption">
<option value="1">1</option>
<option value="ab">ab</option>
<option value="xysd">xysd</option>
<option value="4">4</option>
</select>
</div>
CSS:
.hidden{
display:none;
}
JAVASCRIPT:
$(document).ready(function(){
$(".selectoption").change(function(e){
var currentvalue = $(e.currentTarget).val();
/*to remove selected option from other drop down list */ $('.selectoption').not($(e.currentTarget)).children('option[value='+currentvalue+']').remove();
var currindex = $(e.currentTarget).index();
var prevval = $('#preval').val();
var previndex = $('#preval').attr("name");
$('#preval').val(currentvalue);
$('#preval').attr('name',previndex);
/*apped previous value */
if(previndex == currindex){
$('.selectoption').not($(e.currentTarget)).append('<option value='+prevval+'>'+prevval+'</option>');
}
});
});
JSFiddle:
http://jsfiddle.net/GG3S5/1/