JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="north"> <span class="label"><strong>North Island</strong></span>

    <li><a href="#" id="map1" class="northland">Northland</a>

    </li>
    <li><a href="#" id="map2" class="aukland">Auckland</a>

    </li>
    <li> <a href="#" id="map3" class="waikato">Waikato</a>

    </li>
    <li><a href="#" id="map4" class="bayofplenty">Bay of Plenty</a>

    </li>
    <li><a href="#" id="map5" class="gisborne">Gisborne & Hawkes Bay</a>

    </li>
    <li><a href="#" id="map6" class="taranaki">Taranaki</a>

    </li>
    <li><a href="#" id="map7" class="manawatu">Manawatu & Wanganui</a>

    </li>
    <li><a href="#" id="map8" class="wellington">Wellington</a>

    </li>
</ul>
<select name="select2" id="select2">
    <option value="northland">Northland Stockist</option>
    <option value="aukland">Aukland Stockist</option>
    <option value="waikato">waikato Stockist</option>
    <option value="bayofplenty">Bay of Plenty Stockist</option>
    <option value="gisborne">Gisborne & Hawkes Bay Stockist</option>
    <option value="taranaki">Taranaki Stockist</option>
    <option value="manawatu">Manawatu & Wanganui Stockist</option>
    <option value="wellington">Wellington Stockist</option>
    <option value="nelson">Nelson & Marlborough Stockist</option>
    <option value="westcost">west coast Stockist</option>
    <option value="canterbuty">canterbury Stockist</option>
    <option value="otago">otago & Sounthland Stockist</option>
</select>

CSS

.unique-item-1 {
    color:red;
}
.unique-item-2 {
    color:pink;
}
.unique-item-3 {
    color:green;
}
.unique-item-4 {
    color:black;
}
.unique-item-5 {
    color:wheat;
}

JavaScript

$("ul.north li a").click(function (e) {
    e.preventDefault();
    $("#select2").val($(this).attr("class"));
});