链接选择使用库不用于动态添加

时间:2015-04-17 07:15:37

标签: javascript jquery

我正在为此创建链式选择下拉列表我正在使用库但我的功能无法正常工作,如果我第二次选择它或者如果我选择第二行链接,则第一次选择的值将被禁用选择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

1 个答案:

答案 0 :(得分:0)

您需要在加载页面时初始化链式选择,而不是单击。

我从select中删除了onclick个事件,并将JS更改为:

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

这会使用名称&#39;标记&#39;遍历每个选择,使用它的ID提取数字(使用substr())并找到相应的&#39;系列&#39;选择将其链接到。

编辑: 对于动态添加的行,应在附加行时初始化链式选择。

See this (edited) fiddle