我正在尝试使用两个下拉框来更改图像,当涉及到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>
非常感谢你的帮助!
答案 0 :(得分:0)
进行以下更改并尝试。
对于两个不正确的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');
用于检查getElementByClassName
Click 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>
答案 1 :(得分:0)
你的意思是
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];
答案 2 :(得分:0)
好的,现在它已经在上面的帮助下解决了:
<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>
再次感谢你!