Javascript 如何在select标记中调用两个不同的操作

是否可以在一个select标记中调用两个不同的java脚本函数？ 我的代码是下一个

<select id="selectMP" name="mjesto_potrosnje" onload="changePic()" onchange="changePic()">
    <optgroup label="Company1" id="0">
        <option onclick="getData('username@gmail.com','0','3210949','32109491','1')">
                Info 1
        </option>
        <option onclick="getData('username@gmail.com','0','3210949','32109491','2')">
                Info 2
        </option>
        <option onclick="getData('username@gmail.com','0','3210951','32109511','1')">
                Info 3
        </option>
        <option onclick="getData('username@gmail.com','0','3210951','32109511','2')">
                Info 4
        </option>
        <option onclick="getData('username@gmail.com','0','3210951','32109511','3')">
                Info 5
        </option>
        </optgroup>
</select>

//javascript functions below

<script>
function changePic(){
alert("changePic function");
}

function getData(a,b,c,d,e){
alert("getData function");
}
</script>

只调用changePic函数，所以我想知道为什么我会这样做？更糟糕的是，在Mozilla和IE上它可以工作，但在Chrome上却不行

您不能将onclick附加到选项

您可以向select的onchange函数添加多个函数。您可以将选择值传递给函数getData。.value是选项的属性值的值

例如：对于Info 1，this.value将返回1，依此类推

现在，请看代码：

函数changePic{/*想做什么就做什么*/} 函数getDataa、b、c、d、e{ 控制台。loga，b，c，d，e； document.querySelector'result'.innerHTML=[a，b，c，d，e].join； } 信息1 信息2 信息3 信息4 信息5 输出：

---

一种方法是使用eval作为功能调用来评估期权的价值。如果您这样做，请务必确保期权的价值是安全的。只要您能够确保不会将恶意代码插入此值，使用eval是安全的：

html

window.changePic=函数{ evaldocument.getElementById'selectMP'。值； }; window.getData=functiona、b、c、d、e{ console.logarguments； }; 信息1 信息2 信息3 信息4 信息5

---

注意：这将首先查看值，如果未设置值，则将采用fiddle中所示的html

<select id="selectMP" name="mjesto_potrosnje" onload="changePic()" onchange="changeFunc()">
<optgroup label="Company1" id="0">
    <option>
            Info 1
    </option>
    <option value="test">
            Info 2
    </option>  
    <option>
            Info 3
    </option>
    <option>
            Info 4
    </option>
    <option>
            Info 5
    </option>
    </optgroup>

}

小提琴：

HTML

将选项值保留为JSON对象，并在onchange事件中处理它们

<select id="selectMP" name="mjesto_potrosnje" onchange="changePic()">
<optgroup label="Company1" id="0">
    <option value="{'username@gmail.com','0','3210949','32109491','1'}" onClick=x()>
            Info 1
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 2
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 3
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 4
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 5
    </option>
    </optgroup>

---

答案假设a、b、c、d始终相同。每个选项的值都不同。在我的例子中，前三个值是相同的，但所有5个值都可能不同。所以你的答案对我不适用。你是对的。。我更新了我的答案。尽可能不进行评估和清洁。

<select id="selectMP" name="mjesto_potrosnje" onload="changePic()" onchange="changeFunc()">
<optgroup label="Company1" id="0">
    <option>
            Info 1
    </option>
    <option value="test">
            Info 2
    </option>  
    <option>
            Info 3
    </option>
    <option>
            Info 4
    </option>
    <option>
            Info 5
    </option>
    </optgroup>

function changePic(){
alert("changePic function");
}


function changeFunc() {
var selectBox = document.getElementById("selectMP");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);

<select id="selectMP" name="mjesto_potrosnje" onchange="changePic()">
<optgroup label="Company1" id="0">
    <option value="{'username@gmail.com','0','3210949','32109491','1'}" onClick=x()>
            Info 1
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 2
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 3
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 4
    </option>
    <option value="{'username@gmail.com','0','3210949','32109491','1'}">
            Info 5
    </option>
    </optgroup>

window.changePic = function() {
  var selectBox = document.getElementById("selectMP");
  var val = selectBox.options[selectBox.selectedIndex].value;
  alert(val);
}