Question

我有一些代码可以更改图像以及下拉选项（这部分工作正常）：

<select id="picDD" class="input-sm" name="picDD">
  <option value="1">Nie wiem / obojętnie</option>
  <option value="2">"Woda"</option>
  <option value="3">"Wiatr"</option>
  <option value="4">"Ziemia"</option>
  <option value="5">"Ogień"</option>
  <option value="6">Kilka apartamentów</option>
</select>
<img id="apartament" src="images/rezerwacje/rezerwacje-img/6.jpg" class="img-responsive"><br>

和jquery：

      var pictureList = [
        "0",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/1.jpg",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/2.jpg",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/3.jpg",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/4.jpg",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/5.jpg",
        "http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/6.jpg", ];

        $('#picDD').change(function () {
            var val = parseInt($('#picDD').val());
            $('#apartament').attr("src",pictureList[val]);
        });

我想在这里更改的是将值从数字更改为文本字符串，因为我使用php脚本以一种形式发送此选择并接收数字，例如1,2,3,4,5,6不会对我来说没有任何意义，我希望将以下选项用作值：

<option value="Nie wiem">Nie wiem / obojętnie</option>
<option value="Woda">"Woda"</option>
<option value="Wiatr">"Wiatr"</option>
<option value="Ziemia">"Ziemia"</option>
<option value="Ogien">"Ogień"</option>
<option value="Kilka apartamentow">Kilka apartamentów</option>

如何修改代码以发送文本字符串而不是下拉列表中的数字？我想修改jquery脚本，而不是更改php。谢谢你的帮助。小提琴在下面：

jsfiddle

Answer 1

在change函数中，可以使用以下命令访问选定的索引：

$('#picDD').change(function () {
  var index = $(this).prop("selectedIndex");
  $('#apartament').attr("src",pictureList[index]);
});

更新的小提琴：https://jsfiddle.net/s327mwdj/

修改

重构1：无需存储具有所有可能值的硬编码数组，我们可以节省一些时间并使用index来构建新图像src 。注意，我正在使用ES6模板文字来构建新字符串。

重构2：应该在事件之外一次创建一个事件处理函数。这比使用匿名函数更有效，因为我们不会在<select>每次更改时都重新创建事件处理函数。

function buildSrcUrl(index) {
  return `http://apartamentynarie.pl/images/rezerwacje/rezerwacje-img/${index}.jpg`;
}

function handleChange() {
  $('#apartament').attr("src", buildSrcUrl(
    $(this).prop("selectedIndex")
  ));            
}

$('#picDD').on("change", handleChange);

重构小提琴：https://jsfiddle.net/Lnhsfr1q/

通过下拉菜单但通过传递特定值来更改图像

1 个答案: