Question

是否可以在一个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上没有。

Answer 1

您无法将onchange附加到选项中。

您可以向select的{{1}}功能添加多个功能。您可以将select值传递给函数getData。 .value是value的属性option的值。

例如：对于<option value="1"> Info 1 </option>，this.value将返回1，依此类推。

现在，代码：

function changePic(){/* do what ever you want */}

function getData(a,b,c,d,e){
  console.log(a,b,c,d,e);
  document.querySelector('#result').innerHTML = [a,b,c,d,e].join();
}

<select id="selectMP" name="mjesto_potrosnje" onload="changePic()" onchange="changePic();getData.apply(null, this.value.split(/,/g))">
    <optgroup label="Company1" id="0">
        <option value="username@gmail.com,0,3210949,32109491,1">
                Info 1
        </option>
        <option value="username17@gmail.com,0,321023449,3dfg09491,2">
                Info 2
        </option>
        <option value="username14@gmail.com,0,32dfg949,3210234491,1">
                Info 3
        </option>
        <option value="username13@gmail.com,0,32xcv949,32xcv09491,1">
                Info 4
        </option>
        <option value="username12@gmail.com,0,3210949,32109491,1">
                Info 5
        </option>
   </optgroup>
</select>

<hr />

Output:
<pre id="result"></pre>

Answer 2

注意：这将首先查看值，如果未设置值，则将采用小提琴中显示的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>

的Javascript

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


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

}

小提琴：http://jsfiddle.net/b1v44q1p/

Answer 3

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>

的JavaScript

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

WORKING DEMO

Answer 4

一种方法是使用eval将选项的值作为函数调用进行评估。如果您这样做，请务必确保选项的value安全。只要您能确保恶意代码不会插入此值，eval的使用就是安全的：

<强> HTML

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

<强>码

function changePic(){
    eval(document.getElementById('selectMP').value);
}

function getData(a,b,c,d,e){
    console.log(arguments);//as an example that it works.
}

window.changePic = function(){
	eval(document.getElementById('selectMP').value);
};

window.getData = function(a,b,c,d,e){
	console.log(arguments);
};

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

http://jsfiddle.net/r3wt/ps0mt3ph/1/

最后的想法：

Eval很危险，因为它允许你将字符串作为代码执行，所以更好的方法是在选项中存储数据属性，然后在onchange上你可以按值查找所选的选项，检索数据属性然后调用你的功能。这是我留给你的练习，读者，因为我认为这是一个必要的学习步骤。

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

4 个答案: