Question

我有一个这样的菜单：

<select>
<option value="21">option a</option>
<option value="13">option b</option>
<option value="21">option c</option>
</select>

根据选择的选项，我需要获取相应的值以在链接和图像中的其他位置使用。（它还需要在单击之前从默认选项中拉出来）

<img src="mysite.com/images/[valuegoeshere].jpg">
<a href="mysite.com/pages/[valuegoeshere].jpg">

页面上有几个这些下拉列表的唯一版本。

最简单的方法是什么？

Answer 1

在$(document).ready()上使用以下内容：

function update(val) {
  $("img").attr("src", "mysite.com/images/" + val + ".jpg");
  $("a").attr("href", "mysite.com/pages/" + val + ".jpg");
}

var defaultVal = $("select").change(function () {
  update(this.value); // update <img> and <a> with the newly selected value
}).val();

update(defaultVal); // update <img> and <a> with the default value

<强> DEMO

Answer 2

您可以通过像这样处理选择下拉列表的更改事件来获取所选值

$('#yourselectid').change(function(){
currentSelectedValue=$(this).val();
alert(currentSelectedValue);
})

工作小提琴

http://jsfiddle.net/yeZ3j/

更新的标签

http://jsfiddle.net/yeZ3j/1/

更新代码：

$('select').change(function() {
    currentSelectedValue = $(this).val();
    $('img').attr('src', 'mysite.com/images/' + currentSelectedValue + '.jpg');
    $('a').attr('href', 'mysite.com/images/' + currentSelectedValue + '.jpg');

    $('body').append('<br>currentSource of img is :' + $('img').attr('src') + ' and anchor is: ' + $('a').attr('href'))
});
$(function() {
    $('select').trigger('change')
})

Answer 3

如果表单是作为GET请求提交的，那么这很容易。还要记住给select选择name属性。如果您想在服务器端执行此操作并且name属性为“my_name”，则更改链接值的PHP将如下所示：

$option = $_GET["my_name"];
$link_text = "<a href='mysite.com/pages/" . $option . ".jpg'>link</a>";
$img_text = "<img src='mysite.com/images/" . $option . ".jpg' />";
echo $img_text . "\n" . $link_text;

使用价值表单下拉菜单？

3 个答案: