Изменение изображений с выпадающим списком, но с передачей определенных значений

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/

Редактировать

Refactor 1: Вместо сохранения жестко закодированного массива со всеми возможными значениями, мы можем сэкономить некоторое время и использовать index для создания нового изображения src. Обратите внимание, я использую литералы шаблонов ES6 для создания новой строки.

Refactor 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/