Карта изображений с выпадающим списком Select Dropdown Issue

0

У меня есть две отдельные функции 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 и буду любить какое-то направление, если это возможно.

Заранее спасибо.

Теги:
drop-down-menu
imagemap

2 ответа

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>
Поделиться
0

попробуй это:

    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, чтобы очистить это, но это заставило его работать на меня

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню