Making a jQuery event trigger with both keyboard and mouse inputs inside a select element

OK here goes,

I am trying to write a script that, when a user keys or clicks onto an <option id='blselect'> within a <select> element an event is triggered that shows a hidden element. If any of the other <option class='unselect'> are clicked then the aforementioned element will be hidden.

I have gotten the script to work perfectly in regards to user clicks but the problem is if the user was to user the keyboard to work through the form.

The event wanting to be triggered for the <option id='blselect'> to show is as such;

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

The event wanting to b开发者_开发知识库e triggered for the to hide is as such;

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

That shows a CSS hidden element and of course animates the visual.

So in short, a solution that covers both keyboard and mouse inputs when a user either focuses onto the <option id='blselect'> or the <option class='unselect'> elements.

<li>
    <select>
        <option class="unselect" selected>Please choose an option..</option>
        <option id="blselect">John</option>
        <option class="unselect">Mike</option>
        <option class="unselect">Barry</option>
        <option class="unselect">Sally</option>
        <option class="unselect">Gertrude</option>
        <option class="unselect">Jill</option>
    </select>
</li>

<li id="hidden">
    <input type="text">
</li>

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

Hope this is enough information to get people started? please let me know if you need more.

Thanks in advance.

Take a look at the .change() event. This way, every change in a <select> tag is registered. Look at the examples on the jQuery page to see how it works.

You could use .focus() and then .blur()

function animateVisualIn(){
  $("#hidden").animate({
    opacity: 'show',
    width: "100%"
  }, 1500);
}
function animateVisualOut(){
  $("#hidden").animate({
    opacity: 'hide'
  }, 1500);
}
$('#blselect, .unselect').focus(animateVisualIn).blur(animateVisualOut);

I may have missed the mark on this one. But I think my example shows a good practice that you should get in the habit of using. Define the functions so they are reusable within your code. Then just pass the function name into the jQuery method that accepts a function as the argument. This allows re-use of your functions and prevents memory leakage due to passing around and re-defining anonymous functions.

As @Marnix suggested, the .change() event is the correct even to use here. Otherwise you might be handling mouse or keyboard events which didn't actually change the value in the dropdown.

You probably want to add an ID to the <select>, in which case the code would look like:

var $hidden = $('#hidden');

$('#my-select-id').change(function ()
{
    var $option = $(this.options[this.selectedIndex]);
    if ($option.is('#blselect'))
    {
        $hidden.fadeIn(1500);
    }
    else if ($option.is('.unselect'))
    {
        $hidden.fadeOut(1500);
    }
});

You can use the .keyup(handler) jQuery method to execute a handler as well.

function show() {

}

function hide() {

}

$("#blselect").click(hide);
$("#blselect").keyup(hide);