Мучительный Easy-jQuery-Based-Drop-Down-Builder-EasyDropDown?

Question

[Андрей Никифоров]

Приветствую, для передачи select мне нужно заменить id+random на class, что-то не выходит, часть кода ниже
https://codepen.io/delorean88/pen/oeWdMN

Comments

[Stalker_RED]

По ссылке неработающий кусок кода. В чем суть вопроса?

[Андрей Никифоров]

Stalker_RED: по ссылке кусок кода, там выводит select id="EasyDropDown12345", мне нужно заменить id на class, чтобы я мог подставить свой class, т.к передача value по нему идет, полный скрипт не выложить т.к кучу стилей используется, есть https://codepen.io/delorean88/pen/OjmENz и сам сайт на котором я пытаюсь сделать potolki-pk.ru

[Андрей Никифоров]

Stalker_RED: мне нужно подставить class вместо id

<span class="old"><select class="" id="EasyDropDown">
<option value="0">Выбрать фактуру</option>
<option value="200">Матовая - белая</option></span>

[Stalker_RED]

Андрей Никифоров: Что вам мешает подставить class? При чем тут value вообще?
Приведенный кусок просто запоминает id элемента, и если у него нет id - добавляет с рандомным суффиксом.

[Андрей Никифоров]

Stalker_RED: мне мешает подставить класс скрипт, как подставить рядом с id свой class ? подставить мне нужно class чтобы срабатавал скрипт, без class никак не срабатывает

[Андрей Никифоров]

Андрей Никифоров: я не могу подставить class в скрипте, мне это нужно, он модифицирует ведь мой html код

[Stalker_RED]

Андрей Никифоров: кусок, который по первой ссылке ничего не модифицирует.
По второй ссылке вот я добавил класс в css и в третьей строке разметки. Что не так?
https://codepen.io/anon/pen/BdRObd

[Андрей Никифоров]

Stalker_RED: скрипт модифицирует строку с классом dropdown, и вместо select там ul, а select выходит ниже ID EasyDropDown, мне как раз таки и нужно добавить к этому select с id EasyDropDown свой класс, я выявил кусок кода который отвечает за это (насколько я понял), но не хватает знаний чтобы добавить class

<div class="b-field__container">
   <div class="b-select js-select">
      <div class="dropdown open">
         <span class="old">
            <select class="" id="EasyDropDownB2FE7C">
               <option value="0">Выбрать фактуру</option>
               <option value="200">Матовая - белая</option>
               <option value="280">Матовая - цветная</option>
               <option value="200">Сатиновая - белая</option>
               <option value="280">Сатиновая - цветная</option>
               <option value="200">Глянцевая - белая</option>
               <option value="280">Глянцевая - цветная</option>
            </select>
         </span>
         <span class="selected">Выбрать фактуру</span><span class="carat"></span>
         <div style="height: 238px;">
            <ul>
               <li class="active">Выбрать фактуру</li>
               <li class="">Матовая - белая</li>
               <li class="">Матовая - цветная</li>
               <li class="">Сатиновая - белая</li>
               <li class="focus">Сатиновая - цветная</li>
               <li class="">Глянцевая - белая</li>
               <li class="">Глянцевая - цветная</li>
            </ul>
         </div>
      </div>
   </div>
</div>

Мне нужно получить нечто

<select class="SUPERMEGACLASS" id="EasyDropDownB2FE7C">

Буду очень благодарен если поможете

[Stalker_RED]

Андрей Никифоров: Я прямо диву даюсь.
Ну ок, вот переименовал в SUPERMEGACLASS
https://codepen.io/anon/pen/LjygBW


Вы или делаете что-то очень странное или очень странно описываете задачу.

[Андрей Никифоров]

Stalker_RED: пациент potolki-pk.ru
в исходнике

<select class="dropdown">
                  <option value="0">Выбрать фактуру</option>
                  <option value="200">Матовая - белая</option>
                  <option value="280">Матовая - цветная</option>
                  <option value="200">Сатиновая - белая</option>
                  <option value="280">Сатиновая - цветная</option>
                  <option value="200">Глянцевая - белая</option>
                  <option value="280">Глянцевая - цветная</option>
               </select>

а отдаёт совсем другое, отдаёт немного не так и без нужного мне class (мне нужно добавить class select`y, дабы срабатывал value и срабатывал скрипт калькулятора)

<div class="b-field__container">
   <div class="b-select js-select">
      <div class="dropdown open">
         <span class="old">
            <select class="" id="EasyDropDownB2FE7C">
               <option value="0">Выбрать фактуру</option>
               <option value="200">Матовая - белая</option>
               <option value="280">Матовая - цветная</option>
               <option value="200">Сатиновая - белая</option>
               <option value="280">Сатиновая - цветная</option>
               <option value="200">Глянцевая - белая</option>
               <option value="280">Глянцевая - цветная</option>
            </select>
         </span>
         <span class="selected">Выбрать фактуру</span><span class="carat"></span>
         <div style="height: 238px;">
            <ul>
               <li class="active">Выбрать фактуру</li>
               <li class="">Матовая - белая</li>
               <li class="">Матовая - цветная</li>
               <li class="">Сатиновая - белая</li>
               <li class="focus">Сатиновая - цветная</li>
               <li class="">Глянцевая - белая</li>
               <li class="">Глянцевая - цветная</li>
            </ul>
         </div>
      </div>
   </div>
</div>

Виной всему является тот скрипт что в заголовке, мне нужно допилить кусок кода который отвечает за строку

id="EasyDropDownB2FE7C"

и добавить ему class

[Stalker_RED]

Андрей Никифоров: ЧТО МЕШАЕТ ДОБАВИТЬ КЛАСС ПАЦИЕНТУ?

[Андрей Никифоров]

Stalker_RED: мешает то что я не разбираюсь в синтаксисе скрипта, а добавляется я так понял он в строке

domNode.id = !domNode.id ? 'EasyDropDown'+rand() : domNode.id;

Скрипт ведь модифицирует мой код и отдаёт другое в браузере, и я не могу добраться до него чтобы так легко и просто добавить ему class

[Stalker_RED]

Андрей Никифоров:

(мне нужно добавить class select`y, дабы срабатывал value и срабатывал скрипт калькулятора)

Обычно для этого используют name. Не нужно рассказывать почему?

[Андрей Никифоров]

Stalker_RED: name у скрипта нету, есть только value

[Stalker_RED]

Андрей Никифоров: вы прикалываетесь или как, я вам уже дважды показал где добавляется класс, даже с картинкой.
При чем тут скрипт вообще?
Вот еще разок:

<select class="dropdown SUPERMEGACLASS">
                  <option value="0">Выбрать фактуру</option>
                  <option value="200">Матовая - белая</option>
                  <option value="280">Матовая - цветная</option>
                  <option value="200">Сатиновая - белая</option>
                  <option value="280">Сатиновая - цветная</option>
                  <option value="200">Глянцевая - белая</option>
                  <option value="280">Глянцевая - цветная</option>
               </select>

На первую строчку смотрите.

[Андрей Никифоров]

Stalker_RED: мне нужно добавить не к этому select class, скрипт превращает этот кусок html из select > option в ul > li (код чуть выше)

а добавить нужно к строке

<select class="" id="EasyDropDownB2FE7C">

но её даже нету в исходнике html, эта строка управляется непосредственно в скрипте
Это необходимо чтобы подхватить value, без этого скрипта (он нужен для плавности и стилизации select) всё прекрасно работает на странице potolki-pk.ru/kalkulyator

[Stalker_RED]

Андрей Никифоров: Как же нету в исходнике, если его видно когда нажимаешь ctrl+U. Это и есть исходный код, если что.

[Stalker_RED]

Андрей Никифоров: Вот для пущей убедительности


Еще разок: вы делаете или что-то очень странное или очень криво описываете чего хотите и я вас не понимаю.

Есть еще третий вариант - может быть вы сами не понимаете что делаете. Я обычно его не высказываю, так как люди обижаются, но в данном случае похоже.

[Андрей Никифоров]

Stalker_RED: это скрипт который стилизует таким образом select, все модификации кода идут через скрипт

вот блок с select (абсолютно весь, в исходнике - исходник это то что находиться на сервере, в html больше нету никаких select с id="EasyDropDown12345")

<div class="b-field margin_bottom_20 js-calc__container">
         <div class="b-field__label js-calc__text">
            Фактура полотна
         </div>
         <div class="b-field__container">
            <div class="b-select js-select">
               <select class="dropdown">
                  <option value="0">Выбрать фактуру</option>
                  <option value="200">Матовая - белая</option>
                  <option value="280">Матовая - цветная</option>
                  <option value="200">Сатиновая - белая</option>
                  <option value="280">Сатиновая - цветная</option>
                  <option value="200">Глянцевая - белая</option>
                  <option value="280">Глянцевая - цветная</option>
               </select>
            </div>
         </div>
      </div>

Вот тот самый скрипт www.jqueryscript.net/demo/Easy-jQuery-Based-Drop-D... и строка с id=EasyDropDownB2FE7C" управляется в скрипте, и мне нужно добавить этой строке class

[Андрей Никифоров]

Stalker_RED: то что на скрине конечно работает, ведь на странице самого калькулятора работает без скрипта который стилизует select, а мне нужно чтобы работало на главной странице (туда я и внедрил злополучный скрипт)

[Андрей Никифоров]

Stalker_RED: Зайдите на страницу potolki-pk.ru и посмотрите исходный код select, мне нужно добавить class селекту с ID EasyDropDownAF6D1B

<span class="old">
   <select class="" id="EasyDropDownAF6D1B">
      <option value="0">Выбрать фактуру</option>
      <option value="200">Матовая - белая</option>
      <option value="280">Матовая - цветная</option>
      <option value="200">Сатиновая - белая</option>
      <option value="280">Сатиновая - цветная</option>
      <option value="200">Глянцевая - белая</option>
      <option value="280">Глянцевая - цветная</option>
   </select>
</span>

но на сервере такого блока нету, есть только

<select class="dropdown">
                  <option value="0">Выбрать фактуру</option>
                  <option value="200">Матовая - белая</option>
                  <option value="280">Матовая - цветная</option>
                  <option value="200">Сатиновая - белая</option>
                  <option value="280">Сатиновая - цветная</option>
                  <option value="200">Глянцевая - белая</option>
                  <option value="280">Глянцевая - цветная</option>
               </select>

скрипт не может кастомизировать select, поэтому он делает выпадающие списки с помощью ul > li, и прячет select где-то там ниже, а мне нужно получить select, чтобы мой калькулятор работал, для этого мне нужно установить class select`y

[Stalker_RED]

Андрей Никифоров:

но на сервере такого блока нету, есть только
<select class="dropdown">...

Добавьте ему ЕЩЕ ОДИН КЛАСС
Вот так:

<select class="dropdown SUPERMEGACLASS">
                  <option value="0">Выбрать фактуру</option>
                  <option value="200">Матовая - белая</option>
   ...

Или вам не этот select нужен, а какой-то другой? К слову, на странице всего один select, других нет.

И скрипт для этого переделывать НЕ НУЖНО.
И вообще, для того чтобы обращаться к элементам формы лучше использовать name, но вам не обязательно, потому что это заметно сложнее чем дописать ОДНО СЛОВО в разметку.

[Андрей Никифоров]

Stalker_RED: на странице есть другой select (potolki-pk.ru/)

<span class="old">
            <select class="" id="EasyDropDownB2FE7C">
               <option value="0">Выбрать фактуру</option>
               <option value="200">Матовая - белая</option>
               <option value="280">Матовая - цветная</option>
               <option value="200">Сатиновая - белая</option>
               <option value="280">Сатиновая - цветная</option>
               <option value="200">Глянцевая - белая</option>
               <option value="280">Глянцевая - цветная</option>
            </select>
         </span>

Воооооооооот он, мне нужно добавить class, понимаете ? не к dropdown, а к этому блоку который выводиться посредством скрипта ? понимаете ?

[Андрей Никифоров]

Stalker_RED: вот видите пустой класс ? мне нужно туда влепить SUPERMEGACLASS, но не получается, т.к этот код генерирует скрипт, я нашел строку где происходит добавление ID, но не хватает знаний добавить class

[Stalker_RED]

Андрей Никифоров: Я не знаю смеяться или плакать.
На странице potolki-pk.ru ровно один select
На странице potolki-pk.ru/kalkulyator тоже один.
Можете нажать F12, открыть консоль и написать там document.querySelectorAll('select')
Результаты будут такие:

Видимо у вас разные скрипты подключены. Если вам не верится, что querySelectorAll работает правильно, можете написать document.querySelectorAll('img'), например. На главной он выводит 14 картинок (те что в css фоном не выводит, ессно).

С этим разобрались? Убедились что он один на странице и других больше нет? Теперь попробуйте добавить ему класс.
В строке <select class="dropdown"> ставите курсор сразу после dropdown, ставите пробел и пишете название класса. Должно получиться как-то так:
<select class="dropdown SUPERMEGACLASS">...

Убедитесь что редактируете правильный файл. Не забудьте сохранить его, и загрузить на сервер. Может у вас кеширование шаблонов еще есть.

[Андрей Никифоров]

Андрей Никифоров: я бы вписал name, но не разберусь потом с самим калькулятором potolki-pk.ru/scripts/calc.js неужели сложно сделать нечто

domNode.id = !domNode.id ? !domNode.cLASS 'SUPERMEGACLASS' 'EasyDropDown'+rand() : domNode.id;

[Stalker_RED]

Андрей Никифоров:

...но не получается, т.к этот код генерирует скрипт...

неа, не генерирует. Этот тот самый select из исходника.

[Андрей Никифоров]

Stalker_RED: вот скрин с главной страницы, у вас должно быть тоже самое 100%

[Stalker_RED]

Андрей Никифоров:

неужели сложно сделать нечто

domNode.id = !domNode.id ? !domNode.cLASS 'SUPERMEGACLASS' 'EasyDropDown'+rand() : domNode.id;

В оригинале там

domNode.id = !domNode.id ? 'EasyDropDown'+rand() : domNode.id;

Эта строка проверяет есть ли у select'а id, и если нету - добавляет рандомный.
А то что вы написали - неработающая штука с ошибками синтаксиса. И я не думаю что она проще, чем добавить класс в чертов select.

[Stalker_RED]

вот скрин с главной страницы, у вас должно быть тоже самое 100%

, да похоже, я ведь уже линковал картинку. Разве что id был другой.

[Андрей Никифоров]

Stalker_RED: ну так пусть добавляет еще class, мне именно это и нужно, потому что если бы всё так было легко - я бы добавил вручную в html код класс, но я не могу его добавить, т.к скрипт генерирует этот код сам, посмотрите на сайте исходный код www.jqueryscript.net/demo/Easy-jQuery-Based-Drop-D...
там заметное расхождение кода - то что СПРАВА вставляется в шаблон, а браузер отдает совсем другое (без класса для select)

Разве сложно сделать мою неработающую штуку работающей ? добавить класс сложно ?

[Андрей Никифоров]

Stalker_RED:
Посмотрите что в исходниках и что отдает сервер (SUPERMEGACLASS я сам добавил через исходный код)

[Stalker_RED]

Добавьте свой супермегакласс

[Stalker_RED]

Андрей Никифоров: И вот это вот не исходный код


Исходный код вот он (ctrl+U):

А то что на первом скрине - уже обработано парсером браузера и скриптами.

[Андрей Никифоров]

Stalker_RED: ПОЛУЧИЛОСЬ ЛОЛ, я до этого несколько раз вставлял class и не срабатывало почему-то, однако это не решает мою проблему, не хочет работать калькулятор, не срабатывает именно с select ( огромное спасибо за помощь!

[Андрей Никифоров]

Stalker_RED: ПОБЕДИЛЛЛ!
нужно было указать еще data-type="select" data-metric="perM2"

[Stalker_RED]

Андрей Никифоров:

ПОЛУЧИЛОСЬ ЛОЛ, я до этого несколько раз вставлял class и не срабатывало почему-то

На самом деле не очень смешно. Прошло шесть часов, а я так и не смог вас убедить, что ваше предположение "т.к скрипт генерирует этот код сам" - не соответствует истине.
Вангую, что вы даже не пробовали его туда вставлять, или не проверяли что получается когда вставляете.
То-ли я хреново объясняю то ли это не лечится.

[Андрей Никифоров]

Stalker_RED: вставлял, но видимо запутался просто напросто, с самого утра мучаюсь с этим скриптом, а уже 2 56