Question

为什么这不起作用：

HTML：

<img src='picture.jpg'>
<select name='blah[0]' onchange='changePicture();'>
  <option value='default.jpg'>Default</option>
  <option value='somethingelse.jpg'>A picture</option>
</select>

使用Javascript：

function changePicture()
{
  $(this).siblings("img").attr("src",$(this).val());
}

Answer 1

修改您的Javascript函数以接受参数：

function changePicture(tag)
{
  $(tag).siblings("img").attr("src",$(this).val());
}

您的HTML会调用函数传递它＆＃39;这个＆＃39;：

<img src='picture.jpg'>
<select name='blah[0]' onchange='changePicture(this);'>
  <option value='default.jpg'>Default</option>
  <option value='somethingelse.jpg'>A picture</option>
</select>

Answer 2

首先，您没有在代码中传递对select元素的引用，因此this在您的函数中没有任何值。要做到这一点，你会做onchange='changePicture(this);'之类的事情，但我不推荐这样做。

由于你正在使用jQuery，你应该像这样使用jQuery的事件处理：

$('select[name="blah[0]"]').change(function(){
    $(this).siblings("img").attr("src", $(this).val());
})

<强> jsFiddle example

Answer 3

＆＃13;

$(function() {
  $("#select").change(function() {
    var src = $("#select").val(); /* value of the current selected option */
    
    $("#img").prop("src", src);
    
    alert($("#img").prop("src"));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id = "img" src='picture.jpg'>
<select id = "select" name='blah[0]' onchange='changePicture();'>
  <option value = "picture.jpg">Default Picture</option>
  <option value='default.jpg'>Default</option>
  <option value='somethingelse.jpg'>A picture</option>
</select>

＆＃13;

我添加了2个ID，img用于标识图像，select用于标识选择。我使用了.change() JQuery函数，该函数在<option>更改时触发。我选择value的{{1}}，然后更改图片的<option>。

使用jquery获取所选元素的值

3 个答案: