鏈接選擇使用庫不工作爲動態添加

我正在創建鏈接選擇下拉列表爲此目的我正在使用庫，但我的功能工作不正常，第一個選擇的值被禁用，如果我選擇它爲第二個時間或如果我選擇第二行鏈接選擇item.Link鏈接庫here。我需要它來動態生成多行鏈接選擇..我的代碼如下（這只是一個示例，以顯示這是動態生成的）。我也沒有得到任何錯誤。鏈接選擇使用庫不工作爲動態添加

 <html> 
     <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="jquery.chained.min.js"></script> 
     </head> 
     <body> 
     <h4>General Selection</h4> 
<table class="tg" id="custom-fields1"> 
    <colgroup> 
    <col class="col-wide" /> 
    <col class="col-narrow" /> 
    <col class="col-normal" /> 
    <col class="col-normal" /> 
    <col class="col-normal" /> 
    </colgroup> 
    <tr> 
    <th class="tg-hgcj" rowspan="2"> 
     <br />General Stream With Session 
    </th> 
    <th class="tg-hgcj" rowspan="2">Subject Combination</th> 
    <th class="tg-hgcj" colspan="2">Bank Transaction Details</th> 
    <th class="tg-hgcj" rowspan="2">Add More</th> 
    </tr> 
    <tr> 

    <td class="tg-093g">Bank Transaction id</td> 
    <td class="tg-093g">Bank Transaction date</td> 
    </tr> 
    <tr> 
    <td class="tg-30rh"> 
     <select id ="general_stream-0" name="general-stream[]" onclick=""> 
      <option >B.A. General(Day Shift)</option> 
      <option >B.A. General(Day Shift)With Geography</option> 
      <option value="B.A. General(Morning Shift)"> B.A. General(Morning Shift)</option> 
      <option>B.Sc. General [Pure. Science]</option> 
      <option>B.Sc. General[Bio. Science]</option> 
      <option> B.Com. General</option> 
     </select> 
    </td> 
    <td class="tg-30rh"> 

      <select name="GeneraSub[]"id="gen_select-0" > 
<option value="Bengali,English,Pol.Sc. " class="B.A. General(Morning Shift)"> Bengali,English,  Pol.Sc. </option> 
<option value="Bengali,English,Physical Education "class="B.A. General(Morning Shift)"> Bengali,English,  Physical Education </option> 
<option value="Bengali,English,Philosophy"> Bengali,English,  Philosophy  </option>   
<option value="Bengali,English,History    "> Bengali,English,  History    
<option value="Bengali,English,  Physical Education "> Bengali,English,  Physical Education  </option>   
<option value="Bengali,English,  Economics   "> Bengali,English,  Economics   </option> 
<option value="Bengali,English,  Physical Education "> Bengali,English,  Physical Education </option>  
<option value="Bengali,Pol.Sc.,  Philosophy   "> Bengali,Pol.Sc.,  Philosophy   </option> 
<option value="Bengali,Pol.Sc.,  History   "> Bengali,Pol.Sc.,  History   </option>  
<option value="Bengali,Pol.Sc.,  Physical Education"> Bengali,Pol.Sc.,  Physical Education</option>   
<option value="Bengali Pol.Sc.,  Economics  "> Bengali Pol.Sc.,  Economics  </option>  
<option value="Bengali Pol.Sc.,  Physical Education "> Bengali Pol.Sc.,  Physical Education </option>   
<option value="Bengali,Philosophy, Economics  "> Bengali,Philosophy, Economics  </option> 
<option value="English,Philosophy, Economics  "> English,Philosophy, Economics   </option>  
<option value="English,Pol.Sc.,  History   "> English,Pol.Sc.,  History   </option>    
<option value="English,Pol.Sc.,  Physical Education "> English,Pol.Sc.,  Physical Education </option>   
<option value="English,Pol.Sc.,  Economics   "> English,Pol.Sc.,  Economics   </option> 
<option value="English,Pol.Sc.,  Physical Education"> English,Pol.Sc.,  Physical Education </option>   
<option value="Bengali,Philosophy, History   "> Bengali,Philosophy, History   </option>  
<option value="English,Philosophy, History   "> English,Philosophy, History   </option> 
<option value="English,Pol.Sc.,  Philosophy  "> English,Pol.Sc.,  Philosophy  </option> 
<option value="Pol.Sc.,Philosophy, Economics   "> Pol.Sc.,Philosophy, Economics   </option> 
<option value="Pol.Sc.,Philosophy, History"> Pol.Sc.,Philosophy, History</option> 
</select> 


    </td> 
    <td class="tg-30rh"> 
     <input type="text" name="gtran_id[]" id="gtranid-0" onfocus="checkDuplicatesGen(0)"/> 
    </td> 
    <td class="tg-30rh"> 
     <input type="text" name="gtran_date[]" /> 
    </td> 
    <td><a href="javascript:void(0);" class="addCF1">Add</a> 
    </td> 
    </tr> 
</table> 
</body> 
</html>

劇本是

 var m = 1; 

$(document).ready(function() { 
    $(".addCF1").click(function() { 
    $("#custom-fields1").append([ 
     '<tr>', 
    '<td class="tg-30rh">', 


    ' <select id ="general_stream-'+m+'" name="general-stream[]" onclick="">', 
     ' <option value="" >B.A. General(Day Shift)</option>', 
     ' <option value="" >B.A. General(Day Shift)With Geography</option>', 
      '<option value="B.A. General(Morning Shift)"> B.A. General(Morning Shift)</option>', 
      '<option value="">B.Sc. General [Pure. Science]</option>', 
      '<option value="">B.Sc. General[Bio. Science]</option>', 
      '<option value=""> B.Com. General</option>', 
     '</select>', 
     '</td>', 
     '<td class="tg-30rh">', 
     '<select name="GeneraSub[] id= "gen_select-'+m+'" >', 
     '<option value="Bengali,English,  Pol.Sc. "class="B.A. General(Morning Shift)"> Bengali,English,  Pol.Sc. </option>', 
     '<option value="Bengali,English,  Physical Education "class="B.A. General(Morning Shift)"> Bengali,English,  Physical Education </option>', 
     '<option value="Bengali,English,  Philosophy "class="B.A. General(Morning Shift)"> Bengali,English,  Philosophy  </option>  ' , 
     '<option value="Bengali,English,  History    "class="B.A. General(Morning Shift)"> Bengali,English,  History </option>  ' , 
     '<option value="Bengali,English,  Physical Education "class="B.A. General(Morning Shift)"> Bengali,English,  Physical Education  </option> ',  
     '<option value="Bengali,English,  Economics   "class="B.A. General(Morning Shift)"> Bengali,English,  Economics   </option>', 
     '<option value="Bengali,English,  Physical Education "class="B.A. General(Morning Shift)"> Bengali,English,  Physical Education </option> ',  
     '<option value="Bengali,Pol.Sc.,  Philosophy   "class="B.A. General(Morning Shift)"> Bengali,Pol.Sc.,  Philosophy   </option> ', 
     '<option value="Bengali,Pol.Sc.,  History   "class="B.A. General(Morning Shift)"> Bengali,Pol.Sc.,  History   </option> ',  
     '<option value="Bengali,Pol.Sc.,  Physical Education"class="B.A. General(Morning Shift)"> Bengali,Pol.Sc.,  Physical Education</option> ',  
     '<option value="Bengali Pol.Sc.,  Economics  "class="B.A. General(Morning Shift)"> Bengali Pol.Sc.,  Economics  </option>  ', 
     '<option value="Bengali Pol.Sc.,  Physical Education "class="B.A. General(Morning Shift)"> Bengali Pol.Sc.,  Physical Education </option> ',   
     '<option value="Bengali,Philosophy, Economics  "class="B.A. General(Morning Shift)"> Bengali,Philosophy, Economics  </option> ', 
     '<option value="English,Philosophy, Economics  "class="B.A. General(Morning Shift)"> English,Philosophy, Economics   </option> ', 
     '<option value="English,Pol.Sc.,  History   "class="B.A. General(Morning Shift)"> English,Pol.Sc.,  History   </option> ',   
     '<option value="English,Pol.Sc.,  Physical Education "class="B.A. General(Morning Shift)"> English,Pol.Sc.,  Physical Education </option> ',  
     '<option value="English,Pol.Sc.,  Economics   "class="B.A. General(Morning Shift)"> English,Pol.Sc.,  Economics   </option>', 
     '<option value="English,Pol.Sc.,  Physical Education"class="B.A. General(Morning Shift)"> English,Pol.Sc.,  Physical Education </option> ',   
     '<option value="Bengali,Philosophy, History   "class="B.A. General(Morning Shift)"> Bengali,Philosophy, History   </option> ', 
     '<option value="English,Philosophy, History   "class="B.A. General(Morning Shift)"> English,Philosophy, History   </option> ', 
     '<option value="English,Pol.Sc.,  Philosophy  "class="B.A. General(Morning Shift)"> English,Pol.Sc.,  Philosophy  </option> ', 
     '<option value="Pol.Sc.,Philosophy, Economics   "class="B.A. General(Morning Shift)"> Pol.Sc.,Philosophy, Economics   </option> ', 
     '<option value="Pol.Sc.,Philosophy, History "class="B.A. General(Morning Shift)"> Pol.Sc.,Philosophy, History</option> ', 
     '</select>', 
     '</td>', 
     '<td class="tg-30rh">', 
     ' <input type="text" name="tran_id[]" id="gtranid-'+m+'" onfocus="checkDuplicatesHons('+m+')"/>', 
     '</td>', 
     '<td class="tg-30rh">', 
     ' <input type="text" name="tran_date[]" />', 
     '</td>', 
     '<td><a href="javascript:void(0);" class="remCF1">Remove</a>', 
     '</td>', 
     '</tr>', 
    ].join('')); 

    $('#gen_select-' + m).trigger('change'); 

    m++; 
    }); 
    $("#custom-fields1").on('click', '.remCF1', function() { 
    $(this).parent().parent().remove(); 
    }); 
}); 




    //Script for Chained select list in general Selection 
    // var i=0; 
    //$('#general_stream-'+i).chained('#gen_select-'+i); 

    $(function() { 
    $('select[name="general_stream[]"]').each(function() { 
     var id = this.getAttribute('id'); 
     $('#gen_select-'+id.substr(15,1)).chained('#'+id); 
    }); 
});

JSFiddle

來源

2015-04-17 Xax

我不知道這個插件。但是因爲你指的是下拉列表，所以onChange事件比onClick更合適。 – andrew

需要初始化鏈接的選擇時，頁面加載，而不是點擊。

我刪除從選擇的onclick事件，改變了JS到：

$(function() { 
    $('select[name="mark"]').each(function() { 
     var id = this.getAttribute('id'); 
     $('#series-'+id.substr(5,1)).chained('#'+id); 
    }); 
});

該走了過來每個選擇名稱爲「標記」，使用它的id提取數（與SUBSTR（））並找到相應的「系列」選擇將其鏈接到。

編輯：對於動態添加的行，鏈接選擇應該在追加行時初始化。

See this (edited) fiddle

來源

2015-04-17 07:50:28 jazZRo

謝謝，但這不是動態創建選定的，因爲我必須在動態創建的數組中使用mark []，正如我所說的那樣;我也修改了這個問題@ jazZRo – Xax

嗨@avi什麼意思是完全用動態創建的數組？動態插入選項還是選擇框？以及如何，與Ajax？ – jazZRo

我的意思是我生成多個標記，並選擇動態時，用戶是選擇添加更多按鈕，所以我使用數組下標訪問該字段的值在php.the選項不會動態生成它們就像在這個問題中寫內部選擇選項。因此，加載後可能會有更多的鏈接選擇行 – Xax

鏈接選擇使用庫不工作爲動態添加

回答

相關問題