Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite
1

So, 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. There may be like 2 hours I'm stuck. Thanks everyone!!

share|improve this question

2 Answers

up vote 0 down vote accepted

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');
}
share|improve this answer
2  
Thanks!!! That was really helpful!!! – André Lucas Nov 5 '12 at 19:58
1  
@AndréLucas Happy to help. Welcome to Stack Overflow. – Michael Berkowski Nov 5 '12 at 20:01
up vote 0 down vote

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;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.