带图像切换的下拉菜单

时间:2013-02-21 14:41:20

标签: javascript html

我正在尝试根据用户在下拉菜单中选择的内容来切换图像。 html和js分为两个不同的文件。

这只是html的一部分:

 <select id="Breed_0_field" name="Breed76" onChange="javascript: wizard();" onkeyup="javascript: wizard();" tabindex="4">
 <option selected="selected" value="Select One">Select One</option>
 <option value="Other/Mix">Other/Mix</option>
 <option value="0">--- Common Breeds----</option>
 <option value="Border Collie">Border Collie</option>
 <option value="Boxer">Boxer</option>
 <option value="Corgi">Corgi</option>
 <option value="Dachshund">Dachshund</option> 

对于JS部分:

 breed = document.getElementById("Breed_0_field").value;
 selectdog()

function selectdog()
{
dog_type=0

switch (breed)
{


case "Affenpinscher": // Affenpinscher
    // Affenpinscher
    document.getElementById("dog_breed_picture").src = "http://handicappedpet.net/helppets/images/avatars/gallery/Dog_Larger/blank.gif";
    break;
case "Affenpinscher": // Affenpinscher
    // Affenpinscher
    document.getElementById("dog_breed_picture").src = "http://handicappedpet.net/helppets/images/avatars/gallery/Dog_Larger/Affenpinscher.gif";
    break;
case "Afghan Hound": // Afghan Hound
    // Afghan Hound
    document.getElementById("dog_breed_picture").src = "http://handicappedpet.net/helppets/images/avatars/gallery/Dog_Larger/Afghan_Hound.gif";
    break;

问题是,这一切都用于数字。 html部分中的值使用1,2,3,4 ...并且正确的图像与1,2,3,4的情况匹配...但是我需要html的值作为它的名称,否则以后在代码中,它只显示数字而不是品种名称。

如何使这个图像开关有点工作但是用字符串而不是数字?

2 个答案:

答案 0 :(得分:0)

我的坏!显然这确实有效!

我的问题是我有一个功能        if(breed&gt; 0){selectdog()} 哪个不会起作用,因为我不久就使用数字了。

但你确实可以使用带有大小写的字符串。

答案 1 :(得分:-1)

你可以做的是有一个带有狗名字的数组,这些数字引用了数组中你可以在代码中使用的索引。我可以提供一个例子,如果有帮助