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

Question

I have this select object:

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

and this function:

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

and I was making the page change with this. But now I want to get this code:

$(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';
    }
})

and make this function loadImage only be triggered when I select one of the options of the tag.

Answer 1

You need to intercept the selectedIndex (or the value) and call your function in your own code:

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

Answer 2

Since you are already using jQuery, you might just as well use it for everything here. You only need to bind one .change() handler which sets window.location if one of the URLs is chosen, and executes the loadImage() function otherwise.

Rather than call the function name loadImage() in the <option> value (which looks strange), I have replaced it below with a special value value='load_image' . The .change() handler will look for that value and execute the function if found.

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

And the jQuery:

$(document).ready(function() {
  // Bind the onchange event for select#alunos
  $('#alunos').change(function() {
    // If the load_image option was selected, call the loadImage() function
    if ($(this).val() == 'load_image') {
      loadImage();
    }
    // Otherwise, load the URL
    else {
     // Unless the blank option is selected...
     if ($(this).val() !== '') {
       window.location = $(this).val();
     }
    }
  });
});
// Can replace with all jQuery (since you are using it anyway)
function loadImage(){
  $('#arte').css('backgroundImage', 'url(aikido.jpg)');
  $('#arte').css('width', '200px');
  $('#arte').css('height', '160px');
}