Question

I have a web-page on which I am using jQuery to access the value of a select element. When the element has an “empty” value (the value = ""), I want to hide a link elsewhere on the page. Unfortunately – I can’t seem to get it working.

Here is my current code:

$(document).ready(function(e) {
    if ($('#cancelNumber').select().val() == "") {
        $('#ticketsLink').hide();
    } else {
        $('#ticketsLink').show();
    }
});

The div tags each have a unique ID (already checked for that) – and I have also tried using === insetad of == – but that didn’t work either. What am I doing wrong?

Answer 1

Your call to .select() is just going to fire the select event on the #cancelNumber element. I think what you’re looking for is more akin to:

$(document).bind('ready', function () {
    var $cancelNumber = $('#cancelNumber');
    var $ticketsLink = $('#ticketsLink');

    var updateLink = function () {
        if ($cancelNumber.children(':selected').val() == '') {
            $ticketsLink.hide();
        } else {
            $ticketsLink.show();
        }
    };

    // Then assuming you want it to re-update every time the box is changed...
    $cancelNumber.bind('change', function () {
        updateLink();
    });

});