Как выбрать вариант настраиваемого компонента выбора, используя JavaScript без какого-либо кода рамки?

63
7

С такими фреймворками, как Angular 1 и 2 или библиотеки, такие как React, увеличилось количество пользовательских элементов <select>, и, хотя они довольно хороши и все, им становится сложнее возиться.

Для случайного элемента <select>, если бы я хотел, чтобы был выбран параметр, я бы просто использовал удобные функции и свойства DOM, которые позволили мне выбрать его без проблем.

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

Итак, теперь, со всеми этими настраиваемыми элементами выбора, я не знаю, с чего начать, даже при создании событий click над фальшивым блоком выбора, похоже, не работает, поэтому я хотел бы узнать общий подход к решению этой проблемы,

В качестве примера можно привести форму регистрации google с их пользовательскими выборами для пола, месяца рождения и гражданства.

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

спросил(а) 2021-01-25T18:49:39+03:00 4 месяца, 3 недели назад
1
Решение
109

Возникает вопрос: предположим, что есть веб-приложение, написанное Angular или React или другие фреймворки, и создается пользовательский компонент "select". OP хочет найти общий подход для выбора конкретной опции без какого-либо кода фреймворка (используя собственный JavaScript или jQuery и т.д.).

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

О решении: анализировать сгенерированный HTML и изменять контент

Поскольку это настраиваемый компонент, генерируемый HTML-код может быть чем угодно. Например, форма регистрации google в вопросе создала кучу <div> для отображения параметров и выбранного результата, без select, без option. Поскольку сгенерированный HTML-код является настолько общим (может быть любым HTML), решение должно быть чрезвычайно общим, соответственно - анализировать сгенерированный HTML и готовиться принять все возможные результаты.

Вот простой пример использования AngularJS: http://jsfiddle.net/cshao/p26muuw9/3/

Почему это не рекомендуется?

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

На самом деле, чтобы изменить внутреннее состояние веб-приложения, невозможно использовать встроенный javascript "снаружи" кода рамки (если только не взломать фреймворк).

Возьмем, например, пример jsfiddle. Даже если выбранный текст результата изменен, веб-приложение $scope.currentOption не будет затронуто. На самом деле, невозможно изменить что-либо в веб-приложении - собственный JavaScript за пределами фреймворка даже не знает id опции, он просто видит какую-то простую старую группу HTML div s.

Обходной путь

Существует обходное решение: восстановить объект внутреннего состояния фреймворка (через собственный JavaScript за его пределами), а затем манипулировать этим объектом состояния. Тем не менее, это было бы основополагающим фактором, различные рамки могут предлагать разные методы. Вот пример в AngularJS: http://jsfiddle.net/cshao/p26muuw9/6/

ответил(а) 2021-01-25T18:49:39+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема