Раскрывающееся меню, отображающее неправильные изображения в зависимости от выбора - PullRequest
0 голосов
/ 20 августа 2009

У меня есть выпадающий список, который изменит изображение, если будет сделан новый выбор. Который я должен работать, используя следующий код

<HTML>
    <HEAD>
        <TITLE>JS1</TITLE>
        <script LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
        <!--
          image1 = new image(120,90)
          image1.src = "desk1.gif"
          image2 = new image(120,90)
          image2.src = "desk2.gif"
          image3 = new image(120,90)
          image3.src = "desk3.gif"
          image4 = new image(120,90)
          image4.src = "desk4.gif"

          function loadCatch(list)
          {
            var img = list.options[list.selectedIndex].value
            document.thumbnail.src = eval(img + ".src")
          }
       </SCRIPT>
    </HEAD>
    <BODY> 
        <IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
        <FORM>
            <SELECT NAME="catch" onChange="loadCatch(this)">
            <OPTION VALUE="Image1">Bands
            <OPTION VALUE="Image2">Clips
            <OPTION VALUE="Image3">Lamp
            <OPTION VALUE="Image4">Else
           </SELECT>
       </FORM>
    </BODY>
</HTML>

Проблема в том, что моя форма состоит из 3-4 частей, поэтому, когда вы нажимаете назад, чтобы отредактировать форму, она остается выбранной с правильным выбором, но изображение показывает изображение по умолчанию, я знаю, что это происходит потому, что оно использует событие onChange Я исследовал другой способ, используя следующий код:

<script language="JavaScript" type="text/javascript"> 
<!--
var dropdownIndex = document.getElementById('colorsselect').selectedIndex;
var dropdownValue = document.getElementById('colorsselect')[dropdownIndex].value;
document.write(dropdownValue);
//-->
</script>

Которое отображает правильное изображение, если я нажимаю, чтобы вернуться, но оно не отображается (onChange), поэтому пользователь не может получить немедленный результат, показывая новое изображение.

Я не уверен, как объединить две части кода выше, надеюсь, кто-то может помочь?

1 Ответ

2 голосов
/ 21 августа 2009

Вызовите ту же функцию loadCatch onload:

1) Добавьте идентификатор в поле выбора, чтобы вы могли ссылаться на него в другом месте:

<code><select id="catch" name="catch" onchange="loadCatch(this)">

2) Звоните loadCatch от нагрузки на тело:

<code><body onload="loadCatch(document.getElementById('catch'))">

3) Настройте loadCatch, чтобы ничего не делать, если значение еще не выбрано:

<code>
    function loadCatch(list)
    {
        if (list.selectedValue != -1) {
            var img = list.options[list.selectedIndex].value
            document.thumbnail.src = eval(img + ".src")
        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...