问如何动态处理交替的行？

EN

<div class="wrapper">
    <div city_id="1" class="odd">Street Name #1 in city 1</div>
    <div city_id="3" class="even">Street Name #2 in city 3</div>
    <div city_id="2" class="odd">Street Name #3 in city 2</div>
    <div city_id="1" class="even">Street Name #4 in city 1</div>
    <div city_id="1" class="odd">Street Name #5 in city 1</div>
    <div city_id="3" class="even">Street Name #6 in city 3</div>
    <div city_id="2" class="odd">Street Name #7 in city 2</div>
    <div city_id="3" class="even">Street Name #8 in city 3</div>
    <div city_id="1" class="odd">Street Name #9 in city 1</div>
</div>
<select>
    <option value="">Please select...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

.odd {
    background-color: #777;
}
.even {
    background-color: #aaa;
}

$(function() {
    $("select").change(function() {
        var city_id = $("option:selected", this).val();
        $("div[city_id]").each(function() {
            $(this).toggle($(this).attr("city_id") == city_id);
        });
    });
});