关于多个select选项不重复有关问题

关于多个select选项不重复问题。
我想做到，当select1选了“选择1”，其它select 选项就不会有“选择1”，如此类推，当select1选了“选择1”，select2选了“选择2”，其它的select 选择框就没有“选择1”和“选择2”的选项，请问如何实现。

<html>

 <head>

  <title>Document</title>

 </head>

 <body>

 <p>

   <select name="select1" id='select1'>

     <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>

   </select>

   

 </p>

 <p>

   <select name="select2" id='select2'>

     <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>

   </select>

 </p>

 <p>

   <select name="select3" id='select3'>

     <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>

   </select>

 </p>

 <p>

   <select name="select4" id='select4'>

     <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>

   </select>

 </p>

 </body>

</html>

------解决思路----------------------



<!DOCTYPE html>

<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superplus/js/lib/jquery-1.10.2_d88366fd.js"></script>

<script>

$(document).ready(function(){

	$('select').change(function(e){

		var oldvalue=$(this).attr('old');

		var currentvalue=$(this).val();

		if(oldvalue){

			$('select option[value='+oldvalue+']').show();

		}


		$('select option[value='+currentvalue+']').hide();

		$(this).attr('old',currentvalue);

	});

});

</script>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>HTML</title>

        <script type="text/javascript" src="jquery-1.11.2.js"></script>

        <script type="text/javascript" src="m-js5-f_test01.js"></script>         

    </head>

 

<body>

 <p>

   <select name="select1" id='select1'>

     <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>

   </select>

    

 </p>

 <p>

   <select name="select2" id='select2'>

     <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>

   </select>

 </p>

 <p>

   <select name="select3" id='select3'>

     <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>

   </select>

 </p>

 <p>

   <select name="select4" id='select4'>

     <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>

   </select>

 </p>

 </body>

</html>

------解决思路----------------------



$(document).ready(function(){

    $('select').change(function(e){

	var div=$(this).parents('div').attr('id');

        var oldvalue=$(this).attr('old');

        var currentvalue=$(this).val();

        if(oldvalue){

            $('#'+div+' select option[value='+oldvalue+']').show();

        }

 

        $('#'+div+' select option[value='+currentvalue+']').hide();

        $(this).attr('old',currentvalue);

    });

});

关于多个select选项不重复有关问题

相关推荐