Javascript 将地图与“选择”关联

我有一张不同地区的地图。我需要的是，当我在地图上的区域上单击（.click function in js）时，它与我的select绑定：

<label class="b-map__form__region">
                    Region
                    <span class="value custom-select">Choose region</span>
                    <select class ="region_load" id="region_load" name="r_id">
                        <?php foreach($this->regions as $region): ?>
                        <option><?php echo $region['r_name'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </label>

$currentRegion-它是一个变量，用于选择区域，正如您看到的，它被放在我的区域标题上，我还需要将它放在选择中

我在js中为我的地图提供了一些关于坐标的代码。谢谢你的帮助

我的地图有很多区域，这里我只显示一个：

    <div class="b-map">

        <div class="b-map__city"></div>

        <div class="b-map__item">
            <img class="mapImage" src="/images/map-light.png" width="701" height="408" border="0" usemap="#map" />

            <map name="map">
                <area shape="poly" coords="615,0,554,20,548,87,558,93,554,106,557,112,571,118,592,112,592,104,611,88,618,96,628,93,632,77,639,78,640,52,621,55,614,35,631,20" title="<?php echo isset($this->region['chu']) ? $this->region['chu']['r_name'] : "region name for  chu" ?>" href="#chu" />
</map>

                <div class="b-map__item__highlight"></div>
                <div class="b-map__item__pin"></div>

            </div>

这是一种完全不同的方法，但也许这一种方法会给你想要的结果或提示

HTML

<select id="region-select" name="region-select" size="1">
    <option value="-1">...</option>
    <option value="1">Region #1</option>
    <option value="2">Region #2</option>
    <option value="3">Region #3</option>
</select>
<div id="map">
    <a href="#" title="Title of region #1" id="region-1" class="area">Region #1</a>
    <a href="#" title="Title of region #2" id="region-2" class="area">Region #2</a>
    <a href="#" title="Title of region #3" id="region-3" class="area">Region #3</a>
</div>

JavaScript

$(document).ready(function() {
    selectRegion = function(ev) {
        if($(this).find('option:selected').val() > 0) {
            $('.area').removeClass('highlight').filter('#region-'+$(this).find('option:selected').val()).addClass('highlight');   
        }
        ev.preventDefault();
    };
    $('#region-select').on('change',selectRegion);
});


还有。。。如果您有不同区域的透明图像，并且不希望这些透明区域是可选择的（我在读取给定区域的多边形坐标时假设是可选择的），您可以尝试使用jquery编写的脚本。它允许您将选择限制在图像的非透明区域，并触发透明区域后面的元素。（f.e.点击浏览）
将值分配给选项列表并将其用作索引不是更容易吗？@Chris给出选项值，比如，然后在js中使用它？怎么做，我不擅长js:/你能多给我一点HTML吗？不仅是js和selectbox，还有部分mapi进行了编辑，还有我的html地图和许多区域，我只显示了一个区域，另一个几乎相同，除了别名的名称
#map {
    width:800px;
    height:370px;
    background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/c3/World_Map_FIVB.png') top left no-repeat;
    position:relative;
}

#map .area {
    position:absolute;
    display:block;
    text-indent:-9999px;
}

#region-1 {
    top: 40px;
    left:50px;
    height:30px;
    width:100px;
    background-color:#990000;
}

#region-2 {
    bottom: 40px;
    right:400px;
    width:20px;
    height:30px;
    background-color:#009900;
}

#region-3 {
    top:50px;
    right:500px;
    width:40px;
    height:70px;
    background-color:#000099;
}

.area.highlight {
    box-shadow: 0px 0px 4px 8px #333333;
    -webkit-box-shadow: 0px 0px 4px 8px #333333;
    -moz-box-shadow: 0px 0px 4px 8px #333333;
    -o-box-shadow: 0px 0px 4px 8px #333333;
    -ms-box-shadow: 0px 0px 4px 8px #333333;
    opacity:0.75;
    -webkit-opacity:0.75;
    -moz-opacity:0.75;
    -o-opacity:0.75;
    -ms-opacity:0.75;
}

$(document).ready(function() {
    selectRegion = function(ev) {
        if($(this).find('option:selected').val() > 0) {
            $('.area').removeClass('highlight').filter('#region-'+$(this).find('option:selected').val()).addClass('highlight');   
        }
        ev.preventDefault();
    };
    $('#region-select').on('change',selectRegion);
});