Javascript вариант выбора проблемы - PullRequest
Новая
       17

Javascript вариант выбора проблемы

0 голосов
/ 17 мая 2009

Я получил этот код JavaScript из интернета. Это скрипт, который меняет изображение и его заголовок из выпадающего списка выбора опций. Скрипт работает отлично. Единственная проблема, которая у меня есть, состоит в том, что значение в поле опции может быть только цифрами. Есть ли способ адаптировать это, в то время как значение в параметре параметров могут быть словами вместо чисел? Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:200px;
width:250px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:10pt;
text-align:center;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
/************************************************************
* Script by : Raymond Angana
* Title: Dropdown Based Picture w/ Captions
* First seen in AFHB2000.com
* rangana in AHFB2000.com
* Created June 5, 2008
* This notice must stay intact
/**********************************************************/
window.onload=function()
{
    var caption=['Default Image Caption',
                'Caption1',
                'Caption2',
                'Caption3',
                'Caption4',
                'Caption5',
                'Caption6',
                'Caption7',
                'Caption8',
                'Caption9'], // This will be your images caption
    bp='http://h1.ripway.com/rangana/images/', //base url of your images
    imgnum=14, //Number of your images. This should match on your comboboxes options.
    thumb=document.getElementById('thumb'), //id of your image that will be changing
    description=document.getElementById('caption'), //id of your caption
    combobox=document.getElementById('selection'); // id of your combobox.

    combobox.onchange=function()
    {
    thumb.src=bp+'Picture'+this.value+'.jpg';
    description.innerHTML=caption[this.value];
    }
}
</script>
</head>
<body>
<label>Please Change the default picture: </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
<option value="8">Image 8</option>
<option value="9">Image 9</option>
</select>
<br>
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>

Любая помощь будет принята с благодарностью

Ответы [ 2 ]

1 голос
/ 17 мая 2009

Атрибут value может быть текстом, он не должен быть числом. Единственное, что сломается в приведенном выше коде: 

description.innerHTML=caption[this.value];

Вы можете заменить это на: 

description.innerHTML = caption[this.selectedIndex]
0 голосов
/ 17 мая 2009

Я не знаю причину, по которой вы бы хотели, чтобы слово было указано в значении опции, если у вас есть слово, тогда будет трудно получить заголовок.

Если цель состоит в том, чтобы получить изображение, специфичное для выбранной опции, и если вы хотите поставить собственное имя изображения вместо «Picture» + id, я бы изменил, как показано ниже.

В onLoad изменить массив подписей, как показано ниже (добавить дополнительные параметры и соответствующие изображения): 

var appimages=[['Caption1','image1.gif'],['Caption2','image2.gif']];

А в onChange функция меняется следующим образом: 

thumb.src=bp+appimages[this.value][1];
description.innerHTML=appimages[this.value][0];

Надеюсь, это поможет.

...