Question

I have 2 arrays, one with cities, and another array with ID’s…
I would like to loop both, and then output some HTML

Right now im only looping cities, and then appending some HTML to a as following:

if ($jq(".area").length > 0) {

    var region = $jq(".hiddenFieldRegion").val();
    var cityIDs = $jq(".hiddenFieldChosenAreas").val();
    var strcities = $jq(".hiddenFieldChosenCities").val();
    //var cities = strcities.split('|');

    //Set region to be marked
    if (region) {
        $jq(".mapdk").attr("class", region);
    }

    //Appending to searchform
    if (strcities) {
        $jq.each(strcities.toString().split("|"), function (k, v) {
            var v = v.split("|");
            $jq("<option selected />").text(v[0]).appendTo("select.chosen-cities");
        });
    }

}

I would like the place where im appending to the searchform, add an attribute value, with an ID from the cityIDs array…

So i get some HTML like:

<option value="XXX">CityName</option>

Is that possible?

Answer 1

Assuming your cities IDs and your cities names are orderred in the same way, you can access each name/id by this index in the arrays :

var cityIDs = $jq(".hiddenFieldChosenAreas").val();
var strcities = $jq(".hiddenFieldChosenCities").val();

var cityIDs_array = cityIds.split("|");
var strcities_array = strcities.split("|");

....

if (strcities) {
    $jq.each(strcities_array, function (k, v) {
        //var v = v.split("|"); Unnecessary if strcities is like "city1|city2|city3"
        $jq("<option value='"+cityIDs_array[k]+"' />").text(v).appendTo("select.chosen-cities");
    });
}

In this, way, you can access each city ID in your loop.
But I think you should store city name and city id in the same string. For example "city1:1|city2:2|city3:3". Then, with some use of split function, you’ll get id and name.