有无多笔连动下拉选单范例？

Question

联动：http://blog.163.com/nihaonihao1987@126/blog/static/1115808682011102102057669/jquery clone 复制html http://www.w3school.com.cn/jquery/manipulation_clone.asp

Answer 1

有试着改，但一开始预设的连动有反应，按新增的没有连动反应，请问要怎么改? <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.fn.typeselect = function (settings) {
                var _defaultSettings = {};
                var _settings = $.extend(_defaultSettings, settings);
                var _handler = function () {
 
                    //初始化介面
                    var container = this;
                    var selTypeCount = $(".TypeB option", container).length;
                    var selTypeA = $(".TypeA", container);
                    var selTypeB = $(".TypeB", container);
                    var TypeSelectResult = $(".TypeSelectResult", container);
 
                    //事件監聽
                    selTypeA.change(function () {
                        $("option:gt(" + selTypeCount + ")", selTypeB).remove();
                        $("option:eq(" + selTypeCount + ")", selTypeB).remove();
 
                        var selectCity = $('option:selected', selTypeA).text();
 
                        $.each(typeJSON, function (TypeA, obj) {
                            if (TypeA == selectCity) {
                                $.each(obj, function (countyName, code) {
                                    selTypeB
                                        .append($("<option></option>")
                                        .attr("value", countyName)
                                        .text(countyName));
                                });
                            }
                        });
 
                        if (_settings.TypeB) {
                            $("option[value=" + _settings.TypeB + "]", selTypeB).prop('selected', true);
                        }
 
                        selTypeB.trigger('change');
                    });
 
                    selTypeB.change(function () {
                        TypeSelectResult.text('');
                        var selectCity = $('option:selected', selTypeA).text();
                        var selectCounty = $('option:selected', selTypeB).text();
 
                        $.each(typeJSON, function (TypeA, obj) {
                            if (TypeA == selectCity) {
                                $.each(obj, function (countyName, code) {
                                    if (countyName == selectCounty) {
                                        TypeSelectResult.text(code);
                                    }
                                });
                            }
                        });
                    });
 
                    //main
                    $.each(typeJSON, function (value, key) {
                        selTypeA
                            .append($("<option></option>")
                            .attr("value", value)
                            .text(value));
                    });
 
                    if (_settings.TypeA) {
                        $("option[value=" + _settings.TypeA + "]", selTypeA).prop('selected', true);
                        selTypeA.trigger('change');
                    }
 
                };
                return this.each(_handler);
            };
        })(jQuery);
    
        var typeJSON = {
            "政治": {
                "政治熱門": "1",
                "政治消息": "2",
                "政治影音": "3"
            },
            "財經": {
                "財經熱門": "4",
                "財經消息": "5",
                "財經影音": "6"
            },
            "影劇": {
                "影劇熱門": "7",
                "影劇消息": "8",
                "影劇影音": "9"
            },
            "運動": {
                "財經熱門": "11",
                "財經消息": "12",
                "財經影音": "13"
            },
            "社會": {
                "社會熱門": "11",
                "社會消息": "12",
                "社會影音": "13"
            }
        }
        $(function () {
            $('.TypeSelect').typeselect({ TypeA: "政治", TypeB: "政治熱門" });
        });
    </script>
 
<script language="javascript">
function add_new_data() {
 
 var num = document.getElementById("mytable").rows.length;
 
 var Tr = document.getElementById("mytable").insertRow(num);
 
 Td = Tr.insertCell(Tr.cells.length);
 Td.innerHTML='<select class="TypeA" name="A[]"></select>'; 
 
 Td = Tr.insertCell(Tr.cells.length);
 Td.innerHTML='<select class="TypeB" name="B[]"></select>';
 
}
function remove_data() {
 
 var num = document.getElementById("mytable").rows.length;
 
 if(num >2)
 {
 
  document.getElementById("mytable").deleteRow(-1);
 }
}
</script>
<table id="mytable" width="580">
  <tr>
    <td width="150" class="td01">名称</td>
    <td width="200" class="td01">备注</td>
  </tr>
  <tr class="TypeSelect">
    <td>
    <select class="TypeA" name="A[]"></select>
    </td>
    <td>
    <select class="TypeB" name="B[]"></select>
    </td>
  </tr>
</table>      
<br />
<input type="button" value="增加" onclick="add_new_data()"> 
<input type="button" value="減少" onclick="remove_data()">
<br />