Изменить изображение, используя несколько раскрывающихся списков

Я пытаюсь изменить изображение, используя два раскрывающихся окна, я полный noob, когда дело доходит до jquery/javascript, поэтому было интересно, могу ли я немного помочь, даже если это просто подталкивание в правильном направлении.Изменить изображение, используя несколько раскрывающихся списков

И вот в этом проблема. Я хочу, чтобы выбор цвета обивки и выбор цвета краски, оба появлялись на одном и том же продукте, поэтому было бы идеально иметь 2 выпадающих окна.

код у меня до сих пор:

window.onload=function() 
{ 
    var caption=['Default Image Caption', 
       'Caption1', 
       'Caption2', 
       'Caption3', 
       'Caption4', 
       'Caption5', 
       'Caption6', 
       'Caption7', 
       'Caption8', 
       'Caption9'], // This will be your images caption 
    bp='images/', //base url of your images 
    imgnum=8, //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('paint'); // id of your combobox. 
    combobox=document.getElementById('vinyl'); 

    combobox.onchange=function() 
    { 
    thumb.src=bp+'Picture'+this.value+name+'.jpg'; 
    description.innerHTML=caption[this.value]; 
    } 
}

и HTML является

<label>Change the Paint: </label> 
<select id="paint"> 
<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 /> 
<label>Change the Vinyl: </label> 
<select id="vinyl"> 
<option>Change Picture</option> 
<option Name="1">Image 1</option> 
<option Name="2">Image 2</option> 
<option Name="3">Image 3</option> 
<option Name="4">Image 4</option> 
<option Name="5">Image 5</option> 
<option Name="6">Image 6</option> 
<option Name="7">Image 7</option> 
<option Name="8">Image 8</option> 
<option Name="9">Image 9</option> 
</select>

Хорошо так с помощью добрых людей ниже я решил это:

<script type="text/javascript"> 

    function callAFunction(SelectBox) 
    { 
     var caption=[ 
      'Default Image Caption', 
      'Caption1', 
      'Caption2', 
      'Caption3', 
      'Caption4', 
      'Caption5', 
      'Caption6', 
      'Caption7', 
      'Caption8', 
      'Caption9'], 
     bp='images/', 
     imgnum=8, 
     thumb=document.getElementById('thumb'), 
     description=document.getElementById('caption'); 
     thumb.src=bp+'Picture'+paint.value+vinyl.value+'.jpg'; 
     description.innerHTML=caption[SelectBox.value]; 
    } 

</script> 

<img src="/images/picture1.jpg" alt="" id="thumb" /> 

<label>Change the Paint: </label> 
<select id="paint" onChange="callAFunction(this); return false;"> 
    <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 /> 

<label>Change the Vinyl: </label> 
<select id="vinyl" onChange="callAFunction(this); return false;"> 
    <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>

Большое спасибо за вашу помощь!

источник

2013-02-13 user1747102

ID должен быть уникальным братом. –

Сделайте следующие изменения и попробуйте.

У вас есть одинаковые ID для двух DOM.

В HTML

<label>Change the Paint: </label> 
<select class="selection"> 
    <option>Change Picture</option> 
    <option value="1">Image 1</option> 
</select><br /> 

<label>Change the Vinyl: </label> 
<select class="selection"> 
    <option>Change Picture</option> 
    <option name="1">Image 1</option> 
</select>

В JS

combobox=document.getElementById('selection'); 

to 

combobox=document.getElementsByClassName('selection');

Для проверки Работоспособность getElementByClassNameClick here

ответ на OP комментарий.

<script type="text/javascript"> 

    function callAFunction(SelectBox) 
    { 
     var caption=[ 
      'Default Image Caption', 
      'Caption1', 
      'Caption2', 
      'Caption3', 
      'Caption4', 
      'Caption5', 
      'Caption6', 
      'Caption7', 
      'Caption8', 
      'Caption9'], 
     bp='img/', 
     imgnum=8, 
     thumb=document.getElementById('thumb'), 
     description=document.getElementById('caption'); 

     thumb.src=bp+'Picture'+SelectBox.value+name+'.jpg'; 
     description.innerHTML=caption[SelectBox.value]; 
    } 

</script> 

<img src="" alt="" id="thumb" /> 

<label>Change the Paint: </label> 
<select id="paint" onChange="callAFunction(this); return false;"> 
    <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 /> 

<label>Change the Vinyl: </label> 
<select id="vinyl" onChange="callAFunction(this); return false;"> 
    <option>Change Picture</option> 
    <option Name="1">Image 1</option> 
    <option Name="2">Image 2</option> 
    <option Name="3">Image 3</option> 
    <option Name="4">Image 4</option> 
    <option Name="5">Image 5</option> 
    <option Name="6">Image 6</option> 
    <option Name="7">Image 7</option> 
    <option Name="8">Image 8</option> 
    <option Name="9">Image 9</option> 
</select>

источник

2013-02-13 10:20:26

Привет, Спасибо за ответ, это не сработало. Я теперь изменил идентификаторы в исходном сообщении на уникальные идентификаторы, есть ли способ вызвать их на thumb.src, который затем изменил бы img? – user1747102

Фактически после combobox = document.getElementById ('paint'); это вы заменяете это поле со списком combobox = document.getElementById ('vinyl'); поэтому последний будет установлен как combobox .. –

combobox будет сборником во втором примере – mplungjan

вы имели в виду

window.onload=function() { 
    var caption=['Default Image Caption', 
       'Caption11', 
       'Caption12', 
       'Caption13', 
       'Caption14', 
       'Caption15', 
       'Caption16', 
       'Caption17', 
       'Caption18', 
       'Caption19', 
       'Caption21', 
       'Caption22', 
       'Caption23', 
       'Caption24', 
       'Caption25', 
       'Caption26', 
       'Caption27', 
       'Caption28', 
       'Caption29', 
       . 
       . 
       . 
       'Caption99' 
     ], // This will be your images caption - no comma on the last 
    bp='images/', //base url of your images 
    imgnum=8, //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 

    var paint=document.getElementById('paint'); // id of your combobox1. 
    var vinyl=document.getElementById('vinyl'); // id of your combobox2. 

    paint.onchange=vinyl.onchange=function() { 
     var val = paint.value+vinyl.value; // "1"+"1" 
     thumb.src=bp+'Picture'+val+'.jpg'; // loads images/Picture11.jpg 
     description.innerHTML=caption[val]; // loads the 12th text 
    } 
}

или имеют

var vinylCaption["....","....."]; 
var paintCaption["....","....."];

и имеют

description.innerHTML=vinylCaption[vinyl.value] + "/"+paintCaption[paint.value];

источник

2013-02-13 10:47:03 mplungjan

Привет, mplungjan, не могли бы вы добавить его к исходному коду, если бы вы были настолько добры, так что я могу видеть, что было удалено и что было сохранено? – user1747102

Хорошо, так что теперь решается с помощью выше:

<script type="text/javascript"> 

    function callAFunction(SelectBox) 
    { 
     var caption=[ 
      'Default Image Caption', 
      'Caption1', 
      'Caption2', 
      'Caption3', 
      'Caption4', 
      'Caption5', 
      'Caption6', 
      'Caption7', 
      'Caption8', 
      'Caption9'], 
     bp='images/', 
     imgnum=8, 
     thumb=document.getElementById('thumb'), 
     description=document.getElementById('caption'); 
     thumb.src=bp+'Picture'+paint.value+vinyl.value+'.jpg'; 
     description.innerHTML=caption[SelectBox.value]; 
    } 

</script> 

<img src="/images/picture1.jpg" alt="" id="thumb" /> 

<label>Change the Paint: </label> 
<select id="paint" onChange="callAFunction(this); return false;"> 
    <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 /> 

<label>Change the Vinyl: </label> 
<select id="vinyl" onChange="callAFunction(this); return false;"> 
    <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>

Еще раз спасибо!

источник

2013-02-13 12:04:27 user1747102

Не нужно публиковать его снова. Он идентичен по функциям моему предложению, за исключением того, что мой не использует встроенное событие, которое, кстати, не нуждается в возврате false – mplungjan

Изменить изображение, используя несколько раскрывающихся списков

ответ

Смежные вопросы