javascript - 基于Select Option触发JS函数

标签 javascript jquery select tableau-api

我有一个简单的 HTML 选择选项框和一个 JavaScript 函数。我目前使用带有链接和按钮的函数,并使用 onClick 事件触发器。

我想使用“选择选项”来触发该函数。该函数(例如,platform() 会触发嵌入式仪表板上的过滤器。我希望新函数采用所选值并应用关联的函数(例如,platform())过滤嵌入式仪表板。我不想显示已选择的内容。

这只是我的 HTML 和 jS 文件的摘录 - 其中包括所有适当的资源链接,例如 jQuery。

我该怎么做?

注意:当前,“选择选项”中包含的每个值都有类似的函数。我只是出于提出问题的目的而列出了其中一项。其他函数仅在名称和与提供的选项选择值相对应的值上有所不同

<!DOCTYPE html>
<html>
    <body>

        <form>                    
            <h3>Color Detail</h3>
            <br>
            <p>Select the level of detail to depict by color.</p>
            <select id="select_a" name="color">
                <option value="Organization">Organization</option>
                <option value="Parent Organization">Parent Organization</option>
                <option value="Parent Organization">Parent Organization</option>           
                <option value="Market">Market</option>
                <option value="Segment">Segment</option>
                <option value="Program">Program</option>
                <option value="Platform">Platform</option>
            </select>            
        </form>

        <script>
            function platform() {
                mainWorkbook = mainViz.getWorkbook();
                // Set to Detail to Platform (aka Type)
                mainWorkbook.changeParameterValueAsync('Color Detail', 'Platform').then(function () {
                    alertOrConsole("'Color Detail' parameter set to Platform");
                });
            };
        </script>
    </body>
</html>

最佳答案

在更改事件上使用

$("#select_a").on('change', function(){
    var selectedVal = $(this).val();
    switch(selectedVal){
        case 'Parent Organization':
            organization();
        break;
        case 'Market':
            market();
        break;
        case 'Segment':
            segment();
        break;
        case 'Program':
            program();
        break;
        case 'Platform':
            platform();
        break;
    }
});

关于javascript - 基于Select Option触发JS函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35001029/

相关文章:

SQL - 如何选择具有相同多个值的行

mysql - Sql - 我可以搜索记录中的特定数字吗?

javascript - 效率 : one event handler or multiple

javascript - 带有预先输入功能的 Angular Material 自动完成

javascript - 如何根据类名检查元素是否存在?

php - 如何只选择大于今天日期和时间的行?

javascript - JS 是否可以访问加载它们的域?

javascript - 将弹出窗口中的文本插入文本区域

javascript - 无法使用 AJAX 表单

jQuery Validate Unobtrusive 不适用于 TextArea