Question

如何根据下拉选项动态更新img URL的结尾部分？例如，当选择蓝色时，.jog之前的文件名将填入蓝色字样。它使用的是css，我无法在以下内容中添加任何ID：

<img src="www.mysite.com/blue.jpg">

<select>
  <option>green</option>
  <option>blue</option>
</select>

Answer 1

$(document).ready(function() {
    $('select').change(function(){
       var src = $(':selected', this).text()
       $('img').attr('src', location.hostname + "/" + src + '.jpg');
    });
});

Answer 2

试试这个：

$(function() {
  var $img = $('img'), $select = $('select').on('change keyup', function() {
    $img.attr('src','http://www.mysite.com/' + $select.find(':selected').html() + '.jpg')'
  });
});

Answer 3

$(function () {
  $('select').change(function () {
    $(this).parent().attr('src', location.hostname + "/" + this.val() + '.jpg');
  });
});

在IMG URL中显示下拉选择名称

3 个答案: