如何通过单击按钮使用不同的选择选项调用不同的功能

时间:2018-12-06 11:41:23

标签: javascript html node.js

我正在尝试使用选择选项并调用按钮单击的不同功能 例如:

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

我要用每个按钮单击与不同选择选项相关的不同功能。 有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,则希望根据下拉菜单中的字符串来调用函数。这是针对doFileUpload选项的示例

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

但是请考虑,这既不是最佳解决方案,也不是没有错误,而仅仅是一个简单的演示。

请参见this question以供参考