使用select更改img src

时间:2009-07-30 18:27:31

标签: javascript select

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

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

谢谢。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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>