$(document).ready(function() {
var row_count = 1;
$("#newBtn").bind("click",function(){
$("#order-table").append("<tr class=\"odd\"><td>" + row_count + "</td><td class=\"product-title\">
<select name=\"cpname[]\" id=\"cpname\"><option value=\"信息采集器\"selected=\"selected\">信息采集器</option><option value=\"信息变送器\">信息变送器</option><option value=\"信息芯片(进口)\">信息芯片(进口)</option><option value=\"信息芯片（国产）\">信息芯片（国产）</option><option value=\"信息芯片固定基座\">信息芯片固定基座</option><option value=\"人名点\">人名点</option><option value=\"中文软件\">中文软件</option><option value=\"通讯线\">通讯线</option><option value=\"电源\">电源</option><option value=\"胶水\">胶水</option><option value=\"DC3600通讯接头（含线和电源头）\">DC3600通讯接头（含线和电源头）</option></select>
</td><td class=\"product-xh\">
<select name=\"model[]\" id=\"model\"><option value=\"请选择\"selected=\"selected\">请选择</option></select>
</td><td class=\"price-per-pallet\"><input type=\"text\" value=\"1800\" name=\"uprice[]\"></td><td class=\"num-pallets\"><input type=\"text\"class=\"num-pallets-input\"id=\"turface-pro-league-num-pallets\" name=\"amount[]\"></input></td><td class=\"product-xh\"><input type=\"text\" value=\"GREAT\" name=\"supplier[]\"></td><td class=\"row-total\"><input type=\"text\"class=\"row-total-input\"id=\"turface-pro-league-row-total\" value=\"0.00\" name=\"total[]\" readonly =\"readonly\"></td></tr>");
row_count++;
JS文件中的Select 有2个,我想做成联动的,例如选择" 信息采集器 " 那么第二个Select 就自动显示"A"
选择 " 信息变送器 " 就自动显示 “ B ”
怎么实现~~求高手,求专家！网上找的代码，测试了都不行！
是不是因为这个是JQUERY 插入表格的问题。
加到我写的里边之后就不行了，我是使用Jquery 动态添加的表格,表格里放的Select。
<script>
$(document).ready(function() {
$("#newBtn").bind("click",function(){
$("#order-table").append("<tr>内容下拉框</tr>");
});
});
</script>
<table id="order-table">
<tr>
<th>序号</th>
<th>名称</th>
<th style="text-align: right;">合计</th>
</tr>
</table>
<button type="button" value="增加一行" id="newBtn"/ style="width:100px; height:25px;">增加一行</button>
$("#order-table").append 动态增加一条之后,我自己按照你写的加了一下~！ 不行~是不是我加错了！如何才能使用你给的JS 整合到一起使用？麻烦了。
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- 先隐藏第二个select -->
<select id="select2" style="display:none">
</select>
<script>
// 需要引入jquery
// 数据
var data1 = '<option value="11">11</option><option value="12">12</option><option value="13">13</option>';
var data2 = '<option value="21">21</option><option value="22">22</option><option value="23">23</option>';
$(function () {
// 监听change事件
$('#select1').change(function(){
var sValue = $(this).val();
var s2 = $('#select2');
if(sValue) {
// 根据第一个select的value，决定显示哪个数据
s2.html(window['data' + sValue]).show();
} else {
// 根据第一个select的value是空
// 清空第二个select之后隐藏
s2.html('').hide();
}
});
});
</script>追问
麻烦您，我重新补充了一下问题！麻烦再帮忙看看好吗。 麻烦了！
追答var data1 = '<option value="11">11</option><option value="12">12</option><option value="13">13</option>';var data2 = '<option value="21">21</option><option value="22">22</option><option value="23">23</option>';
$(document).ready(function () {
$("#newBtn").bind("click", function () {
$("#order-table").append('<tr><td><select class="select1"><option value="">请选择</option><option value="1">1</option><option value="2">2</option></select></td><td><select class="select2"></select></td><td></td></tr>');
});
// 监听change事件
$('#order-table').delegate('.select1', 'change', function () {
var self = $(this);
var sValue = self.val();
// 查找同一个tr下面的select2
var s2 = self.closest('tr').find('.select2');
if (sValue) {
// 根据第一个select的value，决定显示哪个数据
s2.html(window['data' + sValue]).show();
} else {
// 根据第一个select的value是空
// 清空第二个select之后隐藏
s2.html('').hide();
}
});
});
