在jQuery中,如何根据下拉列表中的selectino更改Html表格标题

Question

我无法改变 我的Html表的文本基于下拉列表的更改事件.

首先是带有Html表定义的div部分,以及下拉列表:

    <div class="floatleft">        
    <span style="margin-left:250px;">Portfolio Filter: </span>
    <select id="drpPortFilters">
        <option>Select a portfolio filter</option>
    </select>

    <div class="PortfolioList"> <!-- PORTFOLIO TABLE ! -->
        <table id="pftable">
            <caption>Portfolio Exposures</caption>
            <tbody></tbody>
        </table>            
    </div>
</div>

这里是jquery document.ready()部分......

注意:" selValue "确实被分配了.警报()告诉我一个很好的价值!

然而,'#pftable'以某种方式迷路了...意思是,这部分不会改变标题!

    $(document).ready(function () {
    // Initialize Trade Contribs table (see html table below)
    var oTable = $('#contribtable').dataTable();

    // Portfolio Filters change event !!
    $('#drpPortFilters').change(function () {
        var selValue = $('#drpPortFilters option:selected').text(); //$(this).val(); 
        alert(selValue);
        $('#pftable').find("caption").text(selValue);            
    });
});

奇怪的是,我确实成功地改变了不同部分的文本; 也就是说,在我通过datatable插件填充Datatable()之后.

也许数据表正在妨碍使用jQuery的传统引用.

对此有何想法或想法？

提前谢谢.....鲍勃

Answer 1

我的测试用例在这里:http://live.datatables.net/oxeqij/19/edit#source

最后,我在Datatables中使用滚动来覆盖我的html表"pftable"的"id"属性.所以我无法使用$('#pftable')来处理我的Html表.

所以底线是我需要在我的html表中添加class ="pftable",然后按如下方式编写jQuery select:

    $('**.pftable**').find("caption").text(selValue);

这最终允许我动态更改我的Html表的文本.

问候.短发