Question

我有一个带有选择组合框的html页面。

<select id="mySelect" name="Geometrical Figures">
  <option>Circle</option>
  <option>Triangle</option>
  <option>Square</option>
  <option>Rectangle</option>
  <option>Polygon</option>
</select>
<button  id="imagedraw" onclick="draw()">Draw Image</button>

我有不同的功能来根据用户选择绘制画布图像

function drawcircle()
function drawrectangle()
function drawtriangle()

我的查询是如何在执行onclick事件时根据用户输入动态调用哪个函数。
例如：当用户选择圆形并单击绘制图像时，将调用drawCircle()函数，类似于其他值。

Answer 1

也许为每个value分配option并使用switch来决定调用哪个函数？

您也可以将函数名称用作value的{{1}}，并按字符串调用该函数：

option

Answer 2

您可以创建函数数组并根据所选的选项索引调用函数。

var funcArray = [drawcircleFN,drawrectangleFN,drawtriangleFN];
var draw = function(){
    var yourSelect = document.getElementById("mySelect");
    var funcIndex = yourSelect.options[ yourSelect.selectedIndex ].value;
    funcArray[funcIndex]();
}

Answer 3

您可以通过保存Select元素来了解所选项目。

var mySelect = document.getElementById('MySelect');
var selected = mySelect.options[mySelect.selectedIndex].text;

然后在绘图功能中，你可以添加它，然后决定做什么：

function draw(){
     var mySelect = document.getElementById('MySelect');
     var selected = mySelect.options[mySelect.selectedIndex].text;
     if(selected === 'Circle'){
          drawCircle();
      }
 .........
}

可能有更可行的解决方案。

根据html选择值调用不同的javascript函数

3 个答案: