連動多筆下拉選單,新增無連動反應

目前是有寫一個,一開始預設的連動有反應,但是按新增的沒有反應
或者是否有高手願意提供其他範例參考?


js部分
//
   <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>	
php的部分
<table id="mytable" width="580">
  <tr>
    <td width="150" class="td01">名稱</td>
    <td width="200" class="td01">備註</td>
  </tr>
  <tr>
    <td>
    <select class="TypeA" name="A[]"></select>
    </td>
    <td>
    <select class="TypeB" name="B[]"></select>
    </td>
  </tr>
</table>

評論

  • php部分少加
    				<input type="button" value="增加" onclick="add_new_data()"> 
    				<input type="button" value="減少" onclick="remove_data()">
    
  • http://twpug.net/discussion/8640 類似吧,就新增的元素需要獨立配置事件的監聽囉
  • 請問 $(Td).find('select').這邊該怎麼呼叫?
    有試著呼叫selTypeA和selTypeB都不行...
    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).find('select').這邊該怎麼呼叫?
    
     Td = Tr.insertCell(Tr.cells.length);
     Td.innerHTML='<select class=\"TypeB\" name=\"B[]\"></select>';
     $(Td).find('select').這邊該怎麼呼叫?
    }
    
  • <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<script src="http://code.jquery.com/jquery-latest.min.js"; type="text/javascript"></script>
    		
    		<script type="text/javascript">
    			$(function(){
    				var typeJSON = {
    					"政治": {
    						"政治熱門": "1",
    						"政治消息": "2",
    						"政治影音": "3"
    					},
    					"財經": {
    						"財經熱門": "4",
    						"財經消息": "5",
    						"財經影音": "6"
    					},
    					"影劇": {
    						"影劇熱門": "7",
    						"影劇消息": "8",
    						"影劇影音": "9"
    					},
    					"運動": {
    						"運動熱門": "11",
    						"運動消息": "12",
    						"運動影音": "13"
    					},
    					"社會": {
    						"社會熱門": "11",
    						"社會消息": "12",
    						"社會影音": "13"
    					}
    				}
    				
    				function setTypeA(trIndex, selectedIndex){
    					var i = 0, selected = "";
    					
    					$("#mytable>tbody tr:eq(" + trIndex + ") .TypeA").html("");
    					$("#mytable>tbody tr:eq(" + trIndex + ") .TypeB").html("");
    					
    					$.each(typeJSON, function (key, val) {
    						
    						if (i == selectedIndex) {
    							selected = "selected";
    							$.each(val, function (name, number) {
    								$("#mytable>tbody tr:eq(" + trIndex + ") .TypeB").append("<option value='" + number + "'>" + name + "</option>");
    							});
    						} else {
    							selected = "";
    						}
    						
    						$("#mytable>tbody tr:eq(" + trIndex + ") .TypeA").append("<option " + selected + ">" + key + "</option>");
    						
    						i = i + 1;
    					});	
    				}
    				
    				setTypeA(0, 0);
    				
    				$("#mytable").on({
    					change: function(){
    						var trIndex = $(this).parent().parent().index();
    						setTypeA(trIndex, $(this)[0].selectedIndex);
    					}
    				}, '.TypeA');
    				
    				$("#add").click(function(){
    					var content, trCount;
    					
    					$("#mytable>tbody tr:eq(0)").clone().appendTo($("#mytable>tbody"));
    					trCount = parseInt($("#mytable>tbody tr").length) - 1;
    					
    					setTypeA(trCount, 0);
    				});
    				
    				$("#del").click(function(){
    					$("#mytable>tbody tr:last").remove();
    				});
    				
    				
    			});
    		</script>
    		
    	</head>
    	<body>
    		
    		<table id="mytable" width="580">
    			<thead>
    				<tr>
    					<td width="150" class="td01">名稱</td>
    					<td width="200" class="td01">備註</td>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>
    						<select class="TypeA" name="A[]"></select>
    					</td>
    					<td>
    						<select class="TypeB" name="B[]"></select>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    
    		<input type="button" value="增加" id="add"> 
    		<input type="button" value="減少" id="del">
    	</body>
    </html>
    
Sign In or Register to comment.