0

我有一个表格，用户可以在其中自定义他们从我们的网站购买的标签。javascript 的目的是当用户从下拉列表中选择该标签时，将图片更改为我们数据库中原始标签的图片。

当用户购买 10 个标签时，当页面加载时，我将代码复制 10 次。问题是唯一有效的是第一个。效果很好！第二个（虽然复制和粘贴的代码）根本无法正常工作。如果我将 getElementById 重命名为标记 1。第二个框非常适合第一个框。但不正确。

这是一些代码。

生成选择选项的 php 函数。

function createSelectDT(){


        $qry = "SELECT `products_model`, `products_image` FROM `zen_products` WHERE `products_id` > '0'";
        $result = mysql_query($qry)or die(mysql_error());

        //we actually need the last two digits to find what department its in.

        while ($row = mysql_fetch_assoc($result)){
            $model = $row['products_model'];
            $image = $row['products_image'];

            //how many characters does the string have?
            $length = strlen($model);

            //subtract two so we can start there
            $length = $length - 2 ;

            //get the last to digits!

            $last2 = substr($model, $length, 2);

            //we have the last two lets make sure that they equal dog tags and echo it as a select option

            if ($last2 == "01"){
                echo "<option value=\"images/" . $image . "\">" . $model . "</option>";
            }
        }

    }

html 和 javascript

<td><img id="tag1" src="images/1.png" /></td><td><select onchange="document.getElementById('tag1').src = this.options[this.selectedIndex].value;" name="tag1"><?php createSelectDT(); ?></select><br />New Header:<input type="text" name="tag1head" /><br />New background:<input type="text" name="tag1bg" /><br />New Footer:<input type="text" name="tag1foot" /><br />Upload image:</td>

<td><img id "tagtwo" src="images/1.png" /></td>     <td><select onchange="document.getElementById('tagtwo').src = this.options[this.selectedIndex].value;" name="tag2"><?php createSelectDT(); ?></select><br />New Header:<input type="text" name="tag1head" /><br />New background:<input type="text" name="tag1bg" /><br />New Footer:<input type="text" name="tag1foot" /><br />Upload image:</td>

有趣的是，如果我将 javscript getElementById 设置为 tag1，tag2 将起作用。但不适用于 tag2。这是怎么回事？

4

2 回答 2

1

我尝试了您所写内容的略微修改版本，它可以正常工作：

<select name="tag2" onchange="document.getElementById('tagtwo').src = this.value;">
       <option value="tag2.jpg">tag2</option>
       <option value="tag3.jpg">tag3</option>
</select>

您可能应该通过稍微重写将 onchange 指向一个函数：

<script type="text/javascript">

function setImage(elem)
{
    document.getElementById(elem.name).src = elem.value;
    return false;
}

</script>

<select name="tag1" onchange="setImage(this);">
     <option value="tag2.jpg">tag2</option>
     <option value="tag3.jpg">tag3</option>
</select>

要使上述函数起作用，名称和 id 必须相等 - 所以在 select name="tag2" 和 img id="tag2" 上。如果这不起作用，请发布 createSelectDT() 的值，因为问题可能存在。

于 2013-09-18T18:37:49.870 回答
0

问题最终成为一个 html 错字。缺少等号。

于 2013-11-08T23:45:41.060 回答