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

Question

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

1

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

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

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

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

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

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

undefined 27 июнь 2017, в 05:15

Источник

1

Вы можете настроить таргетинг с помощью стандартных методов, таких как document.getElementById() , или на основании их появления в DOM. Что касается того, как нацелиться на конкретный элемент, с которым вы боретесь, вам необходимо предоставить соответствующий код в минимальном, полном и проверяемом примере .
Obsidian Age 27 июнь 2017, в 02:25
0

Я не борюсь с каким-либо конкретным случаем, я просто взял наиболее заметную форму, которую я мог бы представить в качестве примера, чтобы проиллюстрировать проблему, поэтому вы не видите никакого кода. Я согласен, что это довольно расплывчатый вопрос, но, возможно, у кого-то есть понимание. Таргетинг не принесет мне пользы, если я не смогу изменить фактическое значение, которое представляет элемент select.
undefined 27 июнь 2017, в 02:27
0

Если вы хотите выбрать параметр в компоненте «выбрать», он всегда будет через «Связывание данных», независимо от того, используется ли он в Angular или React. Это то, что вы спрашиваете? Если да, я рад предложить несколько примеров.
shaochuancs 27 июнь 2017, в 02:32
0

Я понимаю, как это работает, но я не знаю, как, как сторонний пользователь для вложенного углового или x-каркаса, я могу изменить значение выбора, то есть симулировать, что он пользователь, и выбрать из поля выбора.
undefined 27 июнь 2017, в 02:35
0

ах, я думаю, теперь я понимаю ваш вопрос: предположим, что есть веб-приложение, написанное на Angular или React или другими фреймворками, и визуализируется пользовательский компонент "select". Вы хотите выбрать конкретную опцию без какого-либо каркасного кода (используя собственный JavaScript или jQuery и т. Д.). Это правильно?
shaochuancs 27 июнь 2017, в 02:44
0

Это правильно, сэр, даже если это не какая-то инфраструктура, а просто плагин jQuery, я хочу знать, как можно справиться с такой ситуацией, когда нативные компоненты скрыты или не используются, и вам нужно изменить или ввести значение.
undefined 27 июнь 2017, в 02:52

Показать ещё 4 комментария

Теги:

javascript

select

forms

dom

1 ответ

Ещё вопросы

Вы можете настроить таргетинг с помощью стандартных методов, таких как document.getElementById() , или на основании их появления в DOM. Что касается того, как нацелиться на конкретный элемент, с которым вы боретесь, вам необходимо предоставить соответствующий код в минимальном, полном и проверяемом примере .
Я не борюсь с каким-либо конкретным случаем, я просто взял наиболее заметную форму, которую я мог бы представить в качестве примера, чтобы проиллюстрировать проблему, поэтому вы не видите никакого кода. Я согласен, что это довольно расплывчатый вопрос, но, возможно, у кого-то есть понимание. Таргетинг не принесет мне пользы, если я не смогу изменить фактическое значение, которое представляет элемент select.
Если вы хотите выбрать параметр в компоненте «выбрать», он всегда будет через «Связывание данных», независимо от того, используется ли он в Angular или React. Это то, что вы спрашиваете? Если да, я рад предложить несколько примеров.
Я понимаю, как это работает, но я не знаю, как, как сторонний пользователь для вложенного углового или x-каркаса, я могу изменить значение выбора, то есть симулировать, что он пользователь, и выбрать из поля выбора.
ах, я думаю, теперь я понимаю ваш вопрос: предположим, что есть веб-приложение, написанное на Angular или React или другими фреймворками, и визуализируется пользовательский компонент "select". Вы хотите выбрать конкретную опцию без какого-либо каркасного кода (используя собственный JavaScript или jQuery и т. Д.). Это правильно?
Это правильно, сэр, даже если это не какая-то инфраструктура, а просто плагин jQuery, я хочу знать, как можно справиться с такой ситуацией, когда нативные компоненты скрыты или не используются, и вам нужно изменить или ввести значение.

shaochuancs · Answer 1 · 2017-06-27T01-20-00.000Z

Возникает вопрос: предположим, что есть веб-приложение, написанное 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/