How to call different functions with different select options with a button click

Question

I am trying to use a select option and call different fuctions which a button click eg :

<select id="S3_Bucket_Actions" onchange="selectfunction()">
<option disabled="disabled" class="others" selected="selected">select one option</option>
<option value="listBucket">listBucket</option>
<option value="createBucket">createBucket</option>
<option value="doFileUpload">doFileUpload</option>
</select>
<input type='button' class='btn btn-default' value='Run tests' id='#s3-listBucket' />
<div id="buttonholder"></div>
<script>
function selectfunction() {
var selectoption = document.getElementById("S3_Bucket_Actions").value;
document.getElementById("buttonholder").innerHTML = "<input type='button' class='btn btn-default' value='Run All tests' id='s3-"+selectoption+"' />";
             }
 </script>

I want with each button click different functions related to different select options should be called. Can someone help ?

Can you please clarify what you specific problem is ? See [this Question](https://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string) for reference if you just want to know how to use the selectedOption to call a function — Bjoern Urban, Dec 06 '18 at 11:56

score 1 · Accepted Answer · answered Dec 06 '18 at 12:04

If I understand your question correctly you want to call a function depending on the string in the dropwdown. This is an exampke working for the doFileUpload option

<select id="S3_Bucket_Actions" onchange="selectfunction(event)">
<option disabled="disabled" class="others" selected="selected">select one option</option>
<option value="listBucket">listBucket</option>
<option value="createBucket">createBucket</option>
<option value="doFileUpload">doFileUpload</option>
</select>
<input type='button' class='btn btn-default' onclick="callFunctionByString()" value='Run tests' id='#s3-listBucket' />
<div id="buttonholder"></div>
<script>
var selectoption = ""
function selectfunction(event) {

selectoption = event.srcElement.selectedOptions[0].innerHTML

alert(selectoption)
document.getElementById("buttonholder").innerHTML = "<input type='button' class='btn btn-default' value='Run All tests' id='s3-"+selectoption+"' />";
             }
             
             function callFunctionByString(){
 window[selectoption](arguments)
             }
             function doFileUpload(){
             alert("I upload a File")
             }
 </script>

Consider however that this is neither the bestsolution nor free of errors but just a simple demonstration.

See this question for reference

How to call different functions with different select options with a button click

1 Answers1