在IMG URL中显示下拉选择名称 - Display Drop Down Selection Name in IMG URL

Display Drop Down Selection Name in IMG URL

本文关键字：选择显示 IMG URL | 更新日期: 2023-09-27

如何根据下拉选择动态更新img URL的结尾部分？例如，当选择蓝色时，之前的文件名。jog会用单词blue填充。它使用的是css，我无法将任何id添加到：

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

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

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

试试这个：

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