CODEWITHSUNDEEP
jqueryhtmlcss
nate8684
nate8684

Reputation: 539

Change Selection input with jquery

I've been trying to change a selection input through the use of jquery. When the user clicks on the search field, I would like the selection field to change. Here is the code I'm using to do that:

$(document).ready(function() {

$('#cat-filter').change( function() {
    var filterText = $(this).val().toLowerCase();       

    if(filterText == 'all events'){
        $('a.events').css("display", "inline");
    } else if(filterText != ''){
        $('a.events:not([categories~="'+ filterText +'"])').css("display", "none");
        $('a.events[categories~="'+ filterText +'"]').css("display", "inline");
    } else {
        $('a.events').css("display", "inline"); 
    }
});
// --------------- THIS IS THE CODE ----------------
$('#search-input').focus( function() {
    $(this).val('');
    $('a.events').css("display", "inline");         
    $("select option:contains(1)").prop('selected', true);
});
//--------------------------------------------------

$('#search-input').blur( function() {
    $(this).val('Search Events');
});


$('#search-input').keyup(function (){
    textField = null;
    var textField = $(this).val().toLowerCase();
    if (textField != ""){
        $('a.events:not([categories*="'+textField+'"])').css("display", "none");
        $('a.events[categories*="'+textField+'"]').css("display", "inline");
    } else {
        $('a.events').css("display", "inline"); 
    }
});





});

However it doesn't seem to work. I've checked my id's and values but nothing seems to work. I'm using jquery 1.9, which I've read needs to use prop. Please let me know what I'm doing wrong, thanks!

Here's a live example: http://www.lcbcchurch.com/new-site/events

Upvotes: 0

Views: 142

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196112

The issue is not with .prop but with the fact that none of your options contain the 1 in their text..

If you want to target the first one (whose value is 1) then use

$('select option[value="1"]').prop('selected', true);

and since you use the uniform plugin you will also have to issue an update so

var element = $('select option[value="1"]').prop('selected', true);
$.uniform.update(element.closest('select'));

Upvotes: 1

Related Questions