Trigger JS Function based on Select Option

Question

I have a simple HTML select option box and a javascript function. I currently use the function with links and buttons using an onClick event trigger.

I want to use the Select Options to trigger the function. The function (e.g, platform() triggers a filter on an embedded dashboard. I want the new function to take the value selected and apply the associated function (e..g, platform()) filter the embedded dashboard. I don't want to show what has been selected.

This is just an extract from my HTML and jS files - that include all the appropriate links to resources, such as jQuery.

How would I do this?

Note: There are currently like functions for each of the values included in the Select Options. I have only included one for the purpose of asking the question. The other functions differ only in name and the value that corresponds to the Option Select Value provided

<!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>

See this question on how to call a function when you have its name http://stackoverflow.com/q/359788/3029422 — Ionut, Jan 25 '16 at 20:43

Farhan · Accepted Answer · 2016-01-25T20:35:39.407

3

Use on change event

$("#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;
    }
});

edited Jan 25 '16 at 20:35

answered Jan 25 '16 at 19:51

Farhan

1,453
2
15
20

And don't forget to include the jQuery library as a linked source. – Draco18s no longer trusts SE Jan 25 '16 at 19:52
I added my function (the one from above). I did change my option values to include platform (which if you see was not in included in the initial list of option values (my bad). Anyhow, no dice. I want the select box to fire the function associated with the selection. I assume that means the new function has to look for the selected value and then trigger the correct function - as I imagine (in a long way solution) there would be a similar if selected function for each value in the selection list. Does that make sense? – Hellyar Jan 25 '16 at 20:07
@Hellyar But i think last solution was fit according to question, anyhow i have approved the change – Farhan Jan 25 '16 at 20:08
The select HTML and function script are extracted from larger documents, that have all the appropriate links to jQuery and associated APIs, etc. – Hellyar Jan 25 '16 at 20:08
is above code is working for you? if not then what change you want me to do? – Farhan Jan 25 '16 at 20:10
@Farhan ...I am looking for a specific answer that takes the above JS function platform() and has the select #select_a option trigger it. Adding text that I selected something is not what I need. The function platform() triggers a filter on an embedded dashboard. – Hellyar Jan 25 '16 at 20:15
@Farhan No, it did not work. So, when somebody selects Organization I want it to trigger the function organization(), when Platform then platform(), etc. The functions to be triggered are exactly the same except for the name and the value to add to the parameter. Does that make sense. I did not include all the functions because they are repetitive. – Hellyar Jan 25 '16 at 20:20
@Hellyar $("#select_a").on('change', function(){ if($(this).val() == 'Organization'){ organization(); } if($(this).val() == 'Platform '){ platform(); } }); you can add in this function regarding of values. try this and let me know if this will work for you. Also you need to add Jquery lib – Farhan Jan 25 '16 at 20:23
@Farhan Your second suggestion is the Answer. I added a few other items added to my main file and it is filtering the embedded dashboard as needed. Thanks. $("#select_a").on('change', function(){ if($(this).val() == 'Organization'){ organization(); } if($(this).val() == 'Platform'){ platform(); } if($(this).val() == 'Market'){ market(); } if($(this).val() == 'Segment'){ segment(); } if($(this).val() == 'Category'){ category(); } }); – Hellyar Jan 25 '16 at 20:34
i have update the code, means revert the code this time with switch statement. you can do this with if too. Someone edited my answer, – Farhan Jan 25 '16 at 20:36

Trigger JS Function based on Select Option

1 Answers1