select下拉框,選中當前某一項,其他下拉框去掉選中的值
效果圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div class="video_in">
<p>
下拉一
<select name="B1other1_1" id='B1other1_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
<p>
下拉二
<select name="B1other2_1" id='B1other2_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
<p>
下拉三
<select name="B1other3_1" id='B1other3_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
<p>
下拉五
<select name="B1other4_1" id='B1other4_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
<p>
下拉六
<select name="B1other5_1" id='B1other5_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
<p>
下拉七
<select name="B1other5_1" id='B1other6_1' class="select">
<option value='0'selected></option>
<option value='1'>選擇1</option>
<option value='2'>選擇2</option>
<option value='3'>選擇3</option>
<option value='4'>選擇4</option>
<option value='5'>選擇5</option>
<option value='6'>選擇6</option>
<option value='7'>選擇7</option>
<option value='8'>選擇8</option>
</select>
</p>
</div>
</div>
<script>
$(function(){
var oldVal="";
$('.video_in select').each(function() {
if ($(this).find("option:selected")) {
var _thisVal = $(this).find('option:selected').val();
oldVal=$(this).attr("old",_thisVal)
$('.video_in select').parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide()
}
})
$(".video_in select").change(function(){
oldVal=$(this).attr("old");
var _thisVal=$(this).find('option:selected').val();
var id=$(this).attr("id");
$(this).parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide();
$(this).parent().siblings("p").find("option[value="+oldVal+"]").show();
$(this).find("option[value="+oldVal+"]").show();
$(this).attr("old",_thisVal)
})
})
</script>
</body>
</html>
另一種方法:
$(document).ready(function() {
var oldvalue = ""; //上一次選中的值
var currentvalue = ""; //當前選中的值
$('.video_in select').each(function() {
// 默認選中的值
if ($(this).find("option:selected")) {
oldvalue = $(this).attr('old');
var id = $(this).attr('id');
currentvalue = $(this).find('option:checked').val();
$(this).attr('old', currentvalue);
// 如果this下的某一項被選中,則not這個select find option[value=當前選擇的值]外面添加other標籤
// .not('option[value=0]') 該項是select的第一項 默認value爲0
$('.video_in select').not('#' + id).find('option[value=' + currentvalue + ']').not('option[value=0]').wrap('<other></other>')
}
})
$('.video_in select').change(function(e) {
oldvalue = $(this).attr('old');
currentvalue = $(this).find('option:checked').val();
var id = $(this).attr('id');
if (oldvalue != "0") {
if(currentvalue==0){ //當前選擇值等於0的一項 => 第一項(請選擇)
if($('.video_in select').find('option[value=0]').parent().hasClass("select")){
$('.video_in select').not('#' + id).find('option[value=' + oldvalue + ']').unwrap(); //unwrap 移除other
$(this).attr('old', currentvalue); //更新oldvalue的值 已便下次使用
return false;
}
}else{
$('.video_in select').not('#' + id).find('option[value=' + oldvalue + ']').unwrap();
$('.video_in select').not('#' + id).find('option[value=' + currentvalue + ']').wrap('<other></other>');
$(this).attr('old', currentvalue); //更新oldvalue的值 已便下次使用
if( $('.video_in select').find('option[value=0]').parent().hasClass("select")){
return false;
}
$('.video_in select').find('option[value=0]').unwrap();
}
}else{
$('.video_in select').not('#' + id).find('option[value=' + currentvalue + ']').wrap('<other></other>');
$(this).attr('old', currentvalue); //更新oldvalue的值 已便下次使用
if( $('.video_in select').find('option[value=0]').parent().hasClass("select")){ //如果請選擇 退出
return false;
}
$('.video_in select').not('#' + id).find('option[value=' + oldvalue + ']').unwrap()
}
});
});
轉自:https://blog.csdn.net/mingqingyuefeng/article/details/78614882