基于html选择值调用不同的JavaScript功能

问题描述

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

I have a html page with select combo box.

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

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

I have different functions to draw canvas images based on user selection

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

我的查询是如何设置哪个函数在 onclick 事件被执行时基于用户输入动态调用。 br>
例如：当用户选择圆并点击绘制图像时， drawCircle（）函数将被调用，类似于其他值。

My query is how can I set which function to call dynamically based on user input when onclick event is executed.
Ex: When user selects circle and clicks on Draw Image, drawCircle() function would be called, simmilarly for other values.

推荐答案

您可以通过保存 Select 元素知道所选项目。

You can know the selected item by saving the Select element.

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

然后在绘制函数中，你可以添加它，然后决定要做什么：

Then in the draw function you can add that and then decide what to do:

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

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

There may be more viable solutions.

这篇关于基于html选择值调用不同的JavaScript功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！