Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Filtering issue

Posted on 2011-10-25
7
Medium Priority
?
163 Views
Last Modified: 2012-05-12
I have a  a select box that is a list of cities and I want to filter by the state where the city is located.

Here is a sample:
    <select title="Select City..." id="city-list" name="city-list" class="city-list"  multiple="multiple">
      <option value="TX|75001">Addison (Dallas)</option>
      <option value="OH|44300">Akron</option>
      <option value="NY|12205">Albany</option>
      <option value="NM|87102">Albuquerque</option>
      <option value="VA|56308">Alexandria</option>
      <option value="PA|18109">Allentown</option>
    </select>

Open in new window

I want to filter them (not show the items not in the state selected) by the state, which is the first 2 chars of the value. The state will be selected in another select and the select function will need to filter the options in the city by that state value.

I also need to know how to take out the state and '|' when selecting a value from the city list. I am appending the zip codes to an array as they are selected.
0
Comment
Question by:Eddie Shipman
  • 4
  • 3
7 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 37028378
Test page : http://jsfiddle.net/xXuUw/
var backup = [];
$(document).ready(function() {
    $("option", "#city-list").each(function() { backup.push({"value":$(this).val(), "text":$(this).text()}); });
    $("#state-list").change(function() {
        var l = [];
        $("option:selected","#state-list").each(function() {
            l.push($(this).val());
        })
        $("#city-list").empty();
        $(backup).each(function(i,v) {
            if($.inArray(v.value.split("|")[0], l) != -1){
                $("#city-list").append("<option value='" + v.value + "'>" + v.text + "</option>" );
            }
        });        
    })
})

Open in new window

0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 37028970
But how do I get the entire list of cities back in the select, or would I ever need it?
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 37028998
I don't know... YOU are the designer
maybe : http://jsfiddle.net/3nZGN/13/
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 26

Author Comment

by:Eddie Shipman
ID: 37030574
Will the same filtering work on an array. Because I made load the array with this state and the city names and then filter everything that way then load to select from the array
0
 
LVL 26

Author Closing Comment

by:Eddie Shipman
ID: 37038628
The last fiddle works exactly as I want. Thanks. I also added this to get all the selected zip codes in a comma seperated string:

$("#city-list").change(function() {
        var value = $(this).val();
        var zip_str = "";
        $(value).each(function(i,v) {
          zip_str += v.split("|")[1] + ',';
        });       
        alert(zip_str.slice(0,zip_str.length-1));
    })

Open in new window

0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 37038631
Am I doing that efficiently or can it be done easier?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 37039070
it look fine, another one :

$("#city-list").change(function() {
        var value = $(this).val();
        var zip_str = [];
        $(value).each(function(i,v) {
          zip_str.push(v.split("|")[1]);
        });      
        alert(zip_str.join(","));
    })

0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question