将占位符添加到多个 google 图表字符串过滤器

Question

我引用了这个 post How to apply placeholder to Google Visualization control wrapper string filter input? 弄清楚如何将占位符添加到 google 图表过滤器。

//FILTER1

    var building_filter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'building_filter-div',
        'options': {
            'filterColumnLabel': 'Bldg Name',
            'ui': { 'labelStacking': 'horizontal', 'label': 'Building:' }
        }
    });
         google.visualization.events.addListener(building_filter, 'ready', function () {
         $('.google-visualization-controls-stringfilter input').prop('placeholder', 'Building Name');
    });

//FILTER2

    var maintenance_type_filter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'maintenance_type_filter-div',
        'options': {
            'filterColumnLabel': 'Maint Type',
            'ui': { 'labelStacking': 'horizontal', 'label': 'Maintenance Type:' }
        }
    });
        google.visualization.events.addListener(maintenance_type_filter, 'ready', function () {
        $('.google-visualization-controls-stringfilter input').prop('placeholder', 'Maintenance');
    });

它可以工作，只要您要添加占位符的过滤器不超过一个。

在此代码中，它将相同的 'Maintenance' 占位符应用于两个输入，忽略顶部占位符。

如何为每个输入添加占位符？

Answer 1

只需使用 <div> 元素的 id，而不是 google 的 class 名称...

$('#building_filter-div input').prop('placeholder', 'Building Name');

$('#maintenance_type_filter-div input').prop('placeholder', 'Maintenance');

将占位符添加到多个 google 图表字符串过滤器

Add placeholder to multiple google chart string filters

javascript

placeholder

filter

google-visualization