文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >链式选择使用不适用于动态添加的库

问链式选择使用不适用于动态添加的库
EN

Stack Overflow用户
提问于 2015-04-17 07:15:36
回答 1查看 80关注 0票数 0

为此目的，我正在创建链接的select下拉列表，但我使用的是一个库，但是我的函数不能正常工作，如果我第二次选择它，或者如果我选择第二行链式select item.Link of library 这里.i需要它来动态生成多行链接的select..my代码，那么它的值就会被禁用。

代码语言：javascript
复制
     <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>

剧本是

代码语言：javascript
复制
        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

javascript
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-17 07:50:28

当页面加载时，您需要初始化链接的选择，而不是单击。

我从select中删除了onclick事件，并将JS更改为：

代码语言：javascript
复制
$(function() {
    $('select[name="mark"]').each(function() {
        var id = this.getAttribute('id');
        $('#series-'+id.substr(5,1)).chained('#'+id); 
    });
});

这将遍历每个名称为“mark”的select，使用它的id提取数字(带有substr())，并找到相应的“串联”select将其链接到。

编辑:对于动态添加的行，应在附加行时初始化链接的select。

看这个(编辑的)小提琴

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/29692651

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档