Question

我在Select标签中有3个选项。当我选择它们时，我需要调用3种不同的功能。我该怎么做？

`     <select>
            <option selected disabled="">Sort</option>
            <option>Ascending</option>
            <option>Descending</option>
            <option>Basic JSON</option>     
      </select>`

3个函数名：sortArrAcc（），sortArrDec（），load（）

所以如果我选择Ascending那么它应该调用排序Arra cc（）等等。 没有JQuery。

Answer 1

您可以执行以下操作：考虑一下你有以下下拉列表：

            <select name="mselect" id="mselect">
                <option  value="">Select</option>
                <option value="1">Ascending</option>
                <option value="2">Descending</option>
                <option value="3">Basic JSON</option>
         </select>

这是javascript：

        var sortArrAcc = function () {
            // invoke sort array cc and do your necessary work 
            console.log('sortArrAcc');
        };
        var sortArrDec = function () {
            // invoke sort array cc and do your necessary work 
            console.log('sortArrDec');
        };
        var load = function () {
            // do your necessary work 
            console.log('load');
        };

       var funcArray = [sortArrAcc, sortArrDec, load];

        window.addEventListener('load', function () {
            document.getElementById('mselect').addEventListener('change', function (e) {
                var elem = e.target;
                var selectedOption = elem.options[elem.selectedIndex];
                if (selectedOption.value && funcArray[+selectedOption.value]) {
                    funcArray[+selectedOption.value]();
                }
            });
         });

在Option标签中调用不同的函数

1 个答案: