Good day!
With jquery chosen , a list is formed and for each element I need to pass a data-link attribute, can someone tell me how to do this?

Code forming list

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

Script code with settings

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

data generated by me

Where to pass the attribute

  • It's not very clear where you want to send the data-link attribute? - cheops
  • Well, jquery chosen based on this list forms its own based on a bulleted list, I need the li elements in the final list to have data-link attributes from my option - Ivan Bubliy
  • Dobbal screenshots for clarity - Ivan Bubliy

1 answer 1

I recently had exactly the same task: to transfer the value from the option attribute to the end point of the chosen list.

I did not invent a better way than editing an uncompressed version of chosen.jquery.js . On the other hand, I did not see almost anything bad in this, except for the violation of unspoken traditions. Within the framework of one project, working and tested scripts are practically not updated. The risk that the changes will be erased by the new version of the chosen is minimal. But, just in case, I added a comment at the beginning of the file, in which I described the changes made, which I recommend you do.

In general, here is a recipe that is relevant for my version Version 1.4.2 . Edited uncompressed file chosen.jquery.js .

one

We are looking for the SelectParser.prototype.add_option method and inside it the first call to this.parsed.push({ . Add a new element to the object that is “pushing” into the array). Let's call it, for example, link :

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

In this section, the option code is a link to the DOM element of the next <option> from our original select.

It turns out about the following code:

 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

Find the line in the file (in my version it is line 264)

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

In this section of the code, the end point of the <li> list is created. And our value from the data-link is ready for use in the option.link variable.

Next to the found line add

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

Is done

That's all) We update the page via ctrl + f5 (to clear the cache) and check. Two simple lines in the right places of the code and the goal is achieved.

  • Thank! It really worked, although before that I replaced option.innerHTML with html: option.outerHTML in line ~ 64, so not only the text from <option> is transmitted to the final <li>, but <option> itself with all attributes taken into account also worked - Ivan Bubliy
  • @IvanBubliy is also quite a decent option, well thought out. Although a bit dirty - option inside li ... But if it works and nothing is visible - the option is good. - Ivan Pshenitsyn