js控制table里的select的问题

<html>
<head>
<title>Index</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>

</style>
</head>
<body>
<table id="table"></table>
</body>
<script type="text/javascript">
$(function(){
var b = "<tr>";
for(var i = 0; i < 10; i++){
b += "<td><select></select></td>";
}
b += "</tr>";
$("#table").html(b);
appendOption();
$('#table select:first').on('change',function(){
var val = $(this).val();
for(var i = 0; i < $('select').length; i++){
$('#table select').eq(i).find('option[value='+val+']').attr("selected",true);
}
})
});
function appendOption(){
$('select').append("<option value='111'>111</option>");
$('select').append("<option value='222'>222</option>");
$('select').append("<option value='333'>333</option>");
}
</script>
</html>
这样？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
    <title>Index</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>

</style>
</head>
<body>
<table id="table"></table>
</body>
<script type="text/javascript">
$(function(){
var b = "<tr>";
for(var i = 0; i < 10; i++){
b += "<td><select></select></td>";
}
b += "</tr>";
$("#table").html(b);
appendOption();
$('#table select').on('change',function(){
var val = $("#table select:first").val();
var index = $('#table select').index(this);
for(var i = 0; i < $('select').length; i++){
if(i != index)
$('#table select').eq(i).find('option[value='+val+']').attr("selected",true);
}
})
});
function appendOption(){
$('select').append("<option value='111'>111</option>");
$('select').append("<option value='222'>222</option>");
$('select').append("<option value='333'>333</option>");
}
</script>
</html>  只跟本行的第一个select一样
这样是只有一行的情况下是可以用的，我想实现的效果是假如有很多行，当更改每行第一个select的值得时候，当前行的后面的select的值都跟当前行的第一个值相同。请问这样的该如何做呢。
<html>
<head>
    <title>Index</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>

</style>
</head>
<body>
<table id="table">
<tr>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
<td><select></select></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function(){
var b = "<tr>";
for(var i = 0; i < 10; i++){
b += "<td><select></select></td>";
}
b += "</tr>";
$("#table").append(b);
appendOption();
$('#table select').on('change',function(){
var val = $(this).parent().parent().find('select:first').val();
var index = $(this).parent().parent().find('select').index(this);
for(var i = 0; i < $('select').length; i++){
if(i != index)
$(this).parent().parent().find('select').eq(i).find('option[value='+val+']').attr("selected",true);
}
})
});
function appendOption(){
$('select').append("<option value='111'>111</option>");
$('select').append("<option value='222'>222</option>");
$('select').append("<option value='333'>333</option>");
}
</script>
</html>
好像不行啊，我在 $("#table").html(b);这行上面加了个b+=b;这样就有两行了，但是好像是全部的select都一样，然后选第二行的第一个select第二行后面的select都没有改变啊
<script type="text/javascript" src="jquery1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var str ="<tr>";
for(var i=0;i<10;i++){
str+="<td><select></select></td>";
}
str+="</tr>";
$("table").append(str);
$("select").append("<option value='111'>111</option>");
$("select").append("<option value='222'>222</option>");
$("select").append("<option value='333'>333</option>");
$("select:first").change(function(){
var v=$(this).children(":selected").val();
$("option[value='"+v+"']").attr("selected","selected");
});
});
</script>
<table></table>这个效果？
<script type="text/javascript" src="jquery1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var str ="<tr>";
for(var i=0;i<10;i++){
str+="<td><select></select></td>";
}
str+="</tr>";
$("table").append(str);

var str1 ="<tr>";
for(var i=0;i<10;i++){
str1+="<td><select></select></td>";
}
str1+="</tr>";
$("table").append(str1);
$("select").append("<option value='111'>111</option>");
$("select").append("<option value='222'>222</option>");
$("select").append("<option value='333'>333</option>");

$("tr").find("select:first").change(function(){

var v=$(this).children(":selected").val();
alert(v);
$(this).parent().parent().find("option[value='"+v+"']").attr("selected","selected");
});
});
</script>
<table></table>