Myujth

I have some code which changes images along with the dropdown options (this part works fine):

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

and 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]);
 );

The thing I want to change here is to change values from numbers to strings of text because I use a php script to send this choice in a form and receiving numbers, like 1,2,3,4,5,6 doesn't mean anything to me, I would prefer to have the following options as values:

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

How to modify the code to send text strings instead of numbers from dropdown? I'd like to modify jquery script, rather than change php.
Thank you for help. Fiddle below:

jsfiddle

In your change function, you can access the selected index using the following:

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

Updated Fiddle: https://jsfiddle.net/s327mwdj/

Edit

Refactor 1: Instead of storing a hard-coded array with all the possible values, we can save ourselves some time and use index to construct a new image src. Note, I'm using ES6 Template Literals to build the new string.

Refactor 2: An event handler function should be created one time, outside of the event. This is more efficient than using anonymous functions because we aren't recreating the event handler function every time the <select> changes.

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);

Refactored Fiddle: https://jsfiddle.net/Lnhsfr1q/