Создать массив при динамическом создании select-a?

Question

[MegaPuxapb]

Cоздаю селект на основании элементов .item

<div class="cost_services">
        <div class="sevices">
            <div class="icon_wrap">
                <img src="icon1.png">
            </div>
            <div class="text">Название 1</div>
        </div>
        <div class="sevices">
            <div class="icon_wrap">
                <img src="icon2.png">
            </div>
            <div class="text">Название 2</div>
        </div>
    </div>

function select_service() {
   var array = Array.from($('.cost_services .sevices .text')).map(len => len.innerHTML);
   var select = document.getElementById('select_service');
   select.innerHTML = `${array.map(el => `<option value="${el}">${el}</option>`)}`;
};

В option помимо текста, необходимо вставить иконки. (пытаюсь использовать плагин ddSlick designwithpc.com/Plugins/ddSlick#demo)
там для вставки изображения используется такая вот конструкция:

var ddData = [
	    {
	        text: "Facebook",
	        imageSrc: "http://i.imgur.com/XkuTj3B.png"
	    },
	    {
	        text: "Twitter",
	        imageSrc: "http://i.imgur.com/8ScLNnk.png"
	    }
	];

	$('#select_service').ddslick({
	    data: ddData,
	    defaultSelectedIndex:2
	});

Вообщем, как это дело совместить, что бы работало?

Answer 1

[0xD34F]

$('#select_service').ddslick({
  data: $('.cost_services .sevices').get().map(n => ({
    text: $('.text', n).text(),
    imageSrc: $('img', n).attr('src'),
  })),
});