Question

我有两个单独的JavaScript函数运行某些操作......

下拉选项会更改图像，单击时图像包含图像映射区域，更改下拉选项。

这是第一个功能：

<script type="text/javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.statehighlight.picture.options[document.statehighlight.picture.selectedIndex].id
}

这是第二个：

<script type="text/javascript">
function setSelectValue(oVal) {
var oSel = document.statehighlight.picture;
for( var i = 0; i < oSel.options.length; i++ ) {
    if( oSel.options[i].value == oVal ) {
        oSel.options[i].selected = true;
    }
}
}
</script>

问题是，单击图像时，下拉选项会更新，但不会更新图像。

这可以通过jQuery修复，强制下拉选择就好像使用鼠标选择一样吗？或者有没有更好的方法来使这两个javascript函数一起工作？我是jQuery的新手，如果可能的话，我会喜欢一些方向。

提前谢谢。

Answer 1

这里也是一个jquery清理！

var codeMap = {
    'ca': 'http://eyebones.com/ca.jpg',
    'or': 'http://eyebones.com/or.jpg',
    'wa': 'http://eyebones.com/wa.jpg',
    'id': 'http://eyebones.com/id.jpg',
    'ut': 'http://eyebones.com/ut.jpg',
    'wy': 'http://eyebones.com/wy.jpg'
};

$(function () {
    $('area').on('click', function () {
        updateSelection($(this).attr('id'));
    });
    $('#selectBox').on('change', function () {
        updateSelection($(this).val());
    });
});

function updateSelection(code) {
    $('#pictures').attr('src', codeMap[code]);
    $('#selectBox').val(code);
}

我不得不稍微更改标记，只是添加了一些id属性并删除了旧的东西（你可以清理它）

<div class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table cellspacing="5" cellpadding="10" style="border-collapse:separate; border-spacing:0px;" width="100%">
                    <tr>
                        <td valign="top"><b>1</b></td>
                        <td>
                            <p><strong>Where do you live?</strong> </p>
                            <form name="statehighlight">
                                <p>
                                    <select id="selectBox" name="picture" size="1" data-onchange="showimage()">
                                        <option style="display:none;" selected="" disabled="" value="">Select a State</option>
                                        <option id="http://eyebones.com/ca.jpg" value="ca">California</option>
                                        <option id="http://eyebones.com/id.jpg" value="id">Idaho</option>
                                        <option id="http://eyebones.com/or.jpg" value="or">Oregon</option>
                                        <option id="http://eyebones.com/ut.jpg" value="ut">Utah</option>
                                        <option id="http://eyebones.com/wa.jpg" value="wa">Washington</option>
                                        <option id="http://eyebones.com/wy.jpg" value="wy">Wyoming</option>
                                    </select>
                                </p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top"><b>2</b></td>
                        <td>
                            <p><strong>What is the distance in feet?</strong> </p>
                            <p>    <input length="4" onkeypress="return isNumberKey(event)" type="text" placeholder="Enter Distance">  </p>
                        </td>
                    </tr>
                </table>
            </td>
            <td><img usemap="#pacpowermap" src="http://eyebones.com/us.jpg" name="pictures" id="pictures"></td>
        </tr>
    </table>

    <br />
    <a class="btn" href="#">Next</a>


    <map name="pacpowermap" id="pacpowermap">
        <area shape="rect" coords="533,341,535,343" alt="Image Map" style="outline:none;" title="Pacific Power Locations" href="#" />
        <area id="wa" alt="" title="" data-href="javascript:setSelectValue('wa');" shape="poly" coords="35,20,35,44,43,48,47,56,66,55,90,59,97,26,56,15,51,32,44,37,44,26" style="outline:none;" target="_self" />
        <area id="or" alt="" title="oregon" data-href="javascript:setSelectValue('or');" shape="poly" coords="18,91,21,81,29,62,35,47,43,55,62,58,90,63,84,78,81,92,77,107" style="outline:none;" target="_self" />
        <area id="ca" alt="" title="california" data-href="javascript:setSelectValue('ca');" shape="poly" coords="18,100,12,117,15,141,23,168,30,192,48,206,57,223,80,227,89,209,43,142,52,106,19,94" style="outline:none;" target="_self" />
        <area id="id" alt="" title="idaho" data-href="javascript:setSelectValue('id');" shape="poly" coords="106,27,98,27,91,60,95,71,85,79,82,107,133,119,139,87,122,87,116,70,113,73,115,58,104,48" style="outline:none;" target="_self" />
        <area id="ut" alt="" title="utah" data-href="javascript:setSelectValue('ut');" shape="poly" coords="109,117,97,175,144,185,150,137,134,134,134,119" style="outline:none;" target="_self" />
        <area id="wy" alt="" title="" data-href="javascript:setSelectValue('wy');" shape="poly" coords="200,90,199,139,133,130,141,86" style="outline:none;" target="_self" />
    </map>



</div>

Answer 2

试试这个：

    function setSelectValue(oVal) {
        var oSel = document.statehighlight.picture;
        for (var i = 0; i < oSel.options.length; i++) {
            if (oSel.options[i].value == oVal) {
                oSel.options[i].selected = true;
                document.images.pictures.src = document.statehighlight.picture.options[document.statehighlight.picture.selectedIndex].id;
            }
        }
    }

你可以用jquery来清理它，但这让它对我起作用了

选择下拉列表问题的图像映射

2 个答案: