Question

我有这个选择对象：

<select id="alunos" onchange="arteAluno(this);">
    <option selected="selected"></option>
    <option value="loadImage();">Aluno 1</option>
    <option value="../Index.html">Aluno 2</option>  
    <option value="../Index.html">Aluno 3</option>
</select>

和这个功能：

function arteAluno (sel) {
    var url = sel[sel.selectedIndex].value;
    window.location = url;
}

我正在用这个改变页面。但现在我想得到这段代码：

$(document).ready(function() {

    function O(obj) {
        return document.getElementById(obj);
    }
    function loadImage() {
        O('arte').style.backgroundImage="url(aikido.jpg)";
        O('arte').style.width = '200px';
        O('arte').style.height = '160px';
    }
})

并且只有当我选择标签的一个选项时才会触发此函数loadImage。

Answer 1

您需要拦截selectedIndex（或值）并在您自己的代码中调用您的函数：

function arteAluno (sel) {
    var url = sel[sel.selectedIndex].value;
    if(url=='loadImage();') {
        loadImage();
        return;
    } 
    window.location = url;
}

Answer 2

由于您已经在使用jQuery，因此您也可以在此处使用它。如果选择了其中一个URL，则只需绑定一个设置.change()的{{1}}处理程序，否则执行window.location函数。

我没有在loadImage()值（看起来很奇怪）中调用函数名loadImage()，而是使用特殊值<option>替换它。 value='load_image'处理程序将查找该值并在找到时执行该函数。

.change()

和jQuery：

<select id="alunos">
   <option selected="selected"></option>
   <!-- Special value rather than function name here -->
   <option value="load_image">Aluno 1</option>
   <!-- URL values -->
   <option value="../Index.html">Aluno 2</option>  
   <option value="../Index.html">Aluno 3</option>
</select>

如何根据<select>元素上的函数更改javascript css图像？</select>

2 个答案: