使用 select 更改 img src答案

【问题标题】：change img src using select使用 select 更改 img src
【发布时间】：2009-07-31 02:53:02
【问题描述】：

我正在使用选择表单来浏览页面。

<form name="form">
  <select name="menu1"  onChange="MM_jumpMenu('parent',this,1)">
<option value="#" selected>SELECT</option> 
<option value="#a">location A</option>
<option value="#b">location B</option> 
</form>

我希望选择表单具有更改图像 src 的附加功能。比如：

<option value="#a; imagea.src='a2.jpg">location A</option>

谢谢。

【问题讨论】：

标签： javascript select

【解决方案1】：

MM_jumpMenu() 可能是 Macromedia 的一个大单体。如果不是不可能的话，修改它会很困难。另一个问题是MM_jumpMenu() 似乎依赖于value 作为锚点。一旦您将其他信息引入value 属性，MM_jumpMenu() 可能会停止工作。

鉴于所有这些，我建议劫持<option> 标签上的另一个属性并编写自己的新函数：

<form name="form">
    <select name="menu1"
        onchange="MM_jumpMenu('parent',this,1);changeImageSrc(this);">
    <option value="#" selected>SELECT</option> 
    <option id="a2" value="#a">location A</option>
    <option id="b2" value="#b">location B</option> 
</form>
<script type="text/javascript">
function changeImageSrc(sel) {
    var opt = sel.options[sel.selectedIndex];
    if (opt.id) {
        var img = document.getElementById('yourImageId');
        img.src = opt.id + '.jpg';
    }        
}
</script>

【讨论】：

我比我自己更喜欢格兰特的解决方案。但我认为class 是一个比id 更好的属性。
这超出了我的想象。我不知道在哪里插入图像名称。有人想要 40 美元的贝宝来编程这个功能吗？只需... 3 个示例图像。选择表单转到 3 个图像之一并同时更改它。如果对迷你项目感兴趣，请与我联系。我是这个论坛的新手。我希望这个过程是洁净的。谢谢。 Alex illustrator@nosepilot.com
@Josh：很有趣。我比我更喜欢你的解决方案。但你是对的，class 可能是比id 更好的属性。

【解决方案2】：

您需要修改 MM_jumpMenu 函数。请发布该函数的来源。

【讨论】：

谢谢：

【解决方案3】：

MM_jumpMenu 是一个 Dreamweaver 函数。你可能不想去那里。除此之外，在 value 属性中将一堆东西聚集在一起闻起来很糟糕。改为这样做--

<img id="my-image" src="img/default.gif" />

<form name="form">
<select name="menu1" 
    onchange="MM_jumpMenu('parent',this,1); updateImage('my-image', this)">
<option value="#" selected>SELECT</option> 
<option value="#a">location A</option>
<option value="#b">location B</option> 
</form>

<script type="text/javascript">
updateImage = function(imageId, select) {
    var images = {
        a: 'img/a.gif',
        b: 'img/b.gif'
    }
    var key = select.value.substr(1);
    if (typeof images[key] != 'undefined') {
        document.getElementById(imageId).src = images[key];
    }
};
</script>

【讨论】：

谢谢...我是入门级的。值“a”和“b”实际上是我要换出的图像的名称。没有需要交换的额外“我的图像”。我都在导航到“a”和"b" 并交换图像。
可以修改函数以适应您的用例，但您能详细说明一下预期的功能吗？也许您可以将准系统演示页面放到网上？