在 jQuery 中，如何根据下拉列表中的选择更改 Html 表格标题答案

【问题标题】：In jQuery, how to change Html Table caption based on selectino from Drop Down List在 jQuery 中，如何根据下拉列表中的选择更改 Html 表格标题
【发布时间】：2012-09-12 20:09:29
【问题描述】：

我无法根据下拉列表的更改事件更改我的 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”确实被分配了。 alert() 向我展示了一个很好的价值！

但是，“#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() 之后。

也许数据表妨碍了使用 jQuery 的传统引用方式。

对此有何想法或想法？？？

提前谢谢..... 鲍勃

【问题讨论】：

如果您将所有这些代码放到 jsfiddle.net 中会很好，这样人们就可以播放并回发解决方案

标签： jquery html datatables

【解决方案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 表格的文本。

问候。鲍勃

【讨论】：