Используйте несколько атрибутов данных в selectctize. js options - PullRequest
Новая
       13

Используйте несколько атрибутов данных в selectctize. js options

0 голосов
/ 28 марта 2020

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

Для большей ясности мои варианты следующие. 

<select>
<option value="123" data-data='{"code2" : "ab3"}' data-data='{"category" : "a"}'>Example</option>
<option value="456" data-data='{"code2" : "2b9"}' data-data='{"category" : "b"}'>Example</option>
</select>

Я пытаюсь сделать так, чтобы значение 'value', если 'category' было 'a', и значение 'code2', если 'category' было «б». Значение 123 для первого варианта и 2b9 для второго. 

$('select').selectize({
    valueField: 'name',
    dataAttr: 'data-data',
    render: {
        option: function (item, escape) {
            if(item.category === "a"){
              return "<div data-code='" + item.name+ "'>" + data.text + "</div>";
              }
              else {
                return "<div data-code='" + item.code2 + "'>" + data.text + "</div>";
              }
        }
    }
});

Когда я запускаю это, item.code2 отображается независимо от категории. При отладке он показывает, что item.category не определена.

Более того, когда я удаляю атрибут данных для code2, он правильно подбирает item.category. Теперь я прочитал, что мы можем использовать несколько атрибутов данных. Но это просто не работает, когда есть оба атрибута.

Может кто-нибудь подтвердить, можем ли мы использовать несколько атрибутов? Если да, то как?

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

Примечание. В первую очередь я использовал это решение для включения пользовательских атрибутов данных. Добавить атрибут данных для выбора. js options

Заранее спасибо.

-------------- ОБНОВЛЕНИЕ-- ----------

Попробовав несколько вещей, я нашел способ заставить его работать.

Пришлось объединить их в один атрибут data-data (см. Ниже ). 

<option value="123" data-data='{"code2" : "ab3", "category" : "a"}'>Example</option>

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

...