3

Доброго времени суток!
При помощи jquery chosen формируется список и для каждого элемента мне необходимо передавать data-link атрибут, может кто то сможет подсказать, как это сделать?

Код формирующий список

<div class="chosen-container">
<select class="my-chosen-select">
  <option></option>
  <?foreach($arResult["ITEMS"] as $arItem):?>
  <option data-link="<?=$arItem['PROPERTIES']['REG']['VALUE']?>" value="<?echo $arItem["NAME"]?>" ><span><?echo ($arItem["NAME"]." (".$arItem['PROPERTIES']['REG']['VALUE'].")");?></span></option>
  <?endforeach;?>
</select>
</div>

Код скрипта с настройками

$( document ).ready(function() {
  $(".my-chosen-select").chosen({
    placeholder_text_single: "Введите ваш город",
    no_results_text: "Извините, вашего города нет в списке",
    inherit_select_classes: true,
    search_contains: true
  });
});

сформированные мной данные

Куда нужно передать атрибут

3
  • Не очень понятно куда хотите передавать атрибут data-link?
    – cheops
    Commented 12 авг. 2016 в 6:33
  • Ну jquery chosen на основе этого списка формирует собственный на основе маркированного списка, мне нужно что бы у элементов li в итоговом списке были атрибуты data-link из моих option Commented 12 авг. 2016 в 7:08
  • Добвал скрины для наглядности Commented 12 авг. 2016 в 7:14

1 ответ 1

1

У меня недавно стояла точно такая же задача: передать значение из аттрибута option конечному пункту списка chosen.

Лучшего выхода, чем редактировать несжатую версию chosen.jquery.js я не придумал. С другой стороны, я не увидел в этом почти ничего плохого, кроме нарушения негласных традиций. В рамках одного проекта работающие и проверенные скрипты практически не обновляются. Риск, что изменения затрутся новой версией chosen минимален. Но, на всякий случай, я добавил коммент в начале файла, в котором описал произведенные изменения, что и вам рекомендую сделать.

В общем, вот рецепт, актуальный для моей версии Version 1.4.2. Редактировался несжатый файл chosen.jquery.js.

1

Ищем метод SelectParser.prototype.add_option и внутри него первый вызов this.parsed.push({. Добавляем в объект, который "пушится" в массив, новый элемент. Назовем его, к примеру, link:

link: option.getAttribute('data-link'),

На данном участке кода option - это ссылка на DOM-элемент очередного <option> из нашего исходного селекта.

Получается примерно такой код:

SelectParser.prototype.add_option = function(option, group_position, group_disabled) {
  if (option.nodeName.toUpperCase() === "OPTION") {
    if (option.text !== "") {
      if (group_position != null) {
        this.parsed[group_position].children += 1;
      }
      this.parsed.push({
        link: option.getAttribute('data-link'),
        array_index: this.parsed.length,
        options_index: this.options_index,
//...

2

Находим в файле строку (в моей версии это 264 строка)

option_el.setAttribute("data-option-array-index", option.array_index);

На этом участке кода создается конечный пункт списка <li>. А наше значение из data-link у нас готово к использованию в переменной option.link.

Рядом с найденной добавляем строку

option_el.setAttribute("data-link", option.link);

Готово

На этом все) Обновляем страницу через ctrl+f5 (для очистки кеша) и проверяем. Две простых строчки в нужных местах кода и цель достигнута.

2
  • Спасибо! Действительно сработало, хотя до этого я в строке ~64 заменил option.innerHTML на html: option.outerHTML, таким образов в конечный <li> передается не только текст из <option>, но и сам <option> с учетом всех атрибутов, так тоже сработало Commented 12 авг. 2016 в 8:16
  • @IvanBubliy тоже вполне достойный вариант, хорошо придумали. Хотя, немного грязновато - option внутри li... Но если работает и ничего не видно - вариант хороший. Commented 12 авг. 2016 в 8:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.