Question

我有一个表单要求用户从溺水框中进行选择，当他们进行选择时，页面顶部的徽标将更改以匹配他们的选择。这是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;    
};

Answer 1

我认为使用复选框会更具挑战性，除非你让它们像收音机组一样工作。如果你想保留选择，你可以将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']

选中复选框时需要更改图像

1 个答案: