2

我有一个表单，要求用户从下拉框中进行选择，当他们进行选择时，页面顶部的徽标将更改以匹配他们的选择。这是jsfiddle。所以我的问题是这样的，我希望能够将下拉框中的选择名称发布到 mysql，但是由于 javascript 已经使用该值来更改图像，所以在 db 中发布的所有内容都是图像的名称，而不是框中的值。

我想做的不是使用下拉框来更改图像，而是如何使用复选框来完成相同的事情？我有一个默认徽标，该徽标始终显示在表单上，​​直到做出选择为止，因此我也需要将其保留在适当的位置。

这是jsfiddle中的代码 

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

和 javascript

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.value;    
};
4

1 回答 1

3

我认为使用复选框会更具挑战性，除非你让它们像广播组一样工作。如果要保留选择，可以将 img src 放在title，允许您使用值 -

<select id="dd" onChange="swapImage()" style="width: 150px">
    <option value=""></option>
    <option value="Falcons" title="http://xxxxx.com/demo1/decals/falcons2013.jpg" >Falcons</option>
    <option value="Green Valley Knights" title="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option>
    <option value="Longhorns" title="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</select>

然后在您的 js 中，获取选定的选项标题 -

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.options[dropd.selectedIndex].title;   
};

看到这个更新的 jsFiddle 示例 - http://jsfiddle.net/UtcTc/

编辑
如果要保存选定的 img src，我建议在 select 正下方创建一个隐藏元素

<input type="hidden" name="img_url" id="img_url" />

然后将您更改swapImage()为

function swapImage(){
    var image = document.getElementById("logoimage");
    var dropd = document.getElementById("dd");
    image.src = dropd.options[dropd.selectedIndex].title;
    document.getElementById("img_url").value = dropd.options[dropd.selectedIndex].title;    
};

然后可以在表单后捕获 -

$img_url = $_POST['img_url']
于 2013-07-06T01:20:39.117 回答