CODEWITHSUNDEEP
jqueryfilterhtml-select
Kyle Coots
Kyle Coots

Reputation: 2131

jquery Filter dropdown and set selected not working

I'm still new to JQuery, Javascript but this is what I have:

Here is my script:

/* Check for zip code input */
$('#editZipCode').keyup(function() {

    var inputString = $('#editZipCode').val();

    if(inputString.length == 5) {   

    $.ajax({
        url: base_url+"/zip_code_search/"+inputString,

        success: function(data) {

            if(data.length > 0) {

                var parts = data.split(':');

                $('select[name="city"] option').filter(function() { return $(this).text() == parts[0]; }).prop('selected', true);
                $('select[name="state"] option').filter(function() { return $(this).text() == parts[1]; }).prop('selected', true);

            }else{

                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);

            }
        }

    });


    }else{
                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);
    }

});

Here is my html:

<form action="" method="">

 <input type="text" id="editZipCode" name="zip_code">

 <select id="StateOption" name="state">
   <option value="0">-Select-</option>
   <option value="AK">AK</option>
   <option value="AL">AL</option>
   <option value="AR">AR</option>
   <option value="AZ">AZ</option>
 </select>

 <select id="CityOption" name="city">
   <option value="0">-Select-</option>
   <option value="ADAK">ADAK</option>
   <option value="AKIACHAK">AKIACHAK</option>
   <option value="AKIAK">AKIAK</option>
 </select>

</form>

The problem im facing is that it will not set the selected option of the CityOptions dropdown, the StateOptions dropdown works fine.

When I enter the zip code it sets the StateOption dropdown box to the one that matches the one returned from the ajax call but not the CityOption.

If I log parts[0] or parts[1] to the console they both print out the city/state that matches the zip code entered in the input field but again it will only set the state option to the matched value not the city option.

Am I just missing something obvious here?

Thanks in advance!

p.s. I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js if thats important?

Upvotes: 0

Views: 2251

Answers (1)

Fernker
Fernker

Reputation: 2288

I'm slightly confused by this line:

.filter(function() { return $(this).text() == parts[0]; }) As I don't fully understand your intent with it. But I shall carry on anyway.

Now it's kind of hard to fully debug your code without a working example, but I will provide a possible solution but mainly a way to debug/test what you want to happen.

First off, I would possibly change the line above to something like this:

$('select[name="city"] option[value="'+ parts[0] +'"]').prop('selected', true);

But that might not be critical.

To test what's going on you are on the right path with console.log. If you are using chrome I would add a debugger; right after var parts = data.split(':'); This will cause your code to pause here so that you can do some testing (you'll need to have the developer tools open). In the console tab you can now test at that point in your code. So you could type parts and it should print out your array of two items. This power comes from being able to test in the console something like this:

$('select[name="city"] option[value="'+ parts[0] +'"]')

This should return the option object if there is a match, if not you'll get a [] meaning that jQuery queried the page and couldn't find a match. If it does have a match then you can try that code again except with the prop('selected',true); at the end to see if it's working.

This should hopefully help you in being able to debug at the critical point and to understand a little more about what jQuery is doing. You are on your way to becoming a jQuery master!

Upvotes: 1

Related Questions