Question

select 二级联动

$(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 整合到一起使用？麻烦了。

Answer 1

<select id="select1">
  <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();
        }
    });
});