使用多个下拉框更改图像答案

【问题标题】：Change image using multiple drop down boxes使用多个下拉框更改图像
【发布时间】：2013-02-13 10:14:34
【问题描述】：

我正在尝试使用两个下拉框更改图像，当涉及到 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>

非常感谢您的帮助！

【问题讨论】：

ID 必须是唯一的兄弟..

标签： jquery

【解决方案1】：

进行以下更改并尝试。

两个DOM 的ID 相同，这是不正确的。

在 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>

【讨论】：

您好，谢谢您的回复，这不起作用。我现在已将原始帖子中的 ID 更改为唯一 ID，有没有办法在 thumb.src 上调用它们，然后更改 img？
其实在combobox=document.getElementById('paint');之后这个你用 combobox=document.getElementById('vinyl'); 替换那个组合框所以最后一个将被设置为组合框..
combobox 将是第二个示例中的集合
好吧，有什么办法可以将它们都设置为组合框，然后在图像名称中调用它们。目前我正在使用 this.value 但意识到这仅适用于一个组合框
您好，在播放并使用您提供的内容后，我可以使用两个下拉菜单来更改图像，但它们都更改了相同的图片网址。

【解决方案2】：

你是说

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];

【讨论】：

嗨，mplungjan，能否请您将其添加到原始代码中，如果您能这么好，我可以看看哪些内容被剥离，哪些内容被保留？

【解决方案3】：

好的，现在在上面的帮助下解决了：

<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>

再次感谢您！

【讨论】：

不用再发了。它在功能上与我的建议相同，只是我的不使用内联事件，顺便说一下不需要返回 false