在没有任何框架代码的情况下，如何使用JavaScript选择自定义选择组件的选项？_Javascript_Forms_Dom_Select

在没有任何框架代码的情况下，如何使用JavaScript选择自定义选择组件的选项？

javascript forms dom select

在没有任何框架代码的情况下，如何使用JavaScript选择自定义选择组件的选项？,javascript,forms,dom,select,Javascript,Forms,Dom,Select,使用Angular 1&2之类的框架，或者React之类的库，自定义元素的数量有所增加，而且，尽管它们非常漂亮，但它们变得更难修补对于一个随机的元素，如果我想选择一个选项，我只需要使用方便的DOM函数和属性就可以毫无问题地选择它请记住，我正在尝试更改其他人的自定义select的值，很明显，否则相应的框架将很容易告诉您如何连接该对象所以现在，对于所有这些自定义选择元素，我不知道从哪里开始，甚至在假选择框上生成click事件似乎也不起作用，所以我想知道如何解决这个问题的一般方法您可以以为例，

使用Angular 1&2之类的框架，或者React之类的库，自定义

元素的数量有所增加，而且，尽管它们非常漂亮，但它们变得更难修补

对于一个随机的

元素，如果我想选择一个选项，我只需要使用方便的DOM函数和属性就可以毫无问题地选择它

请记住，我正在尝试更改其他人的自定义select的值，很明显，否则相应的框架将很容易告诉您如何连接该对象

所以现在，对于所有这些自定义选择元素，我不知道从哪里开始，甚至在假选择框上生成

click

事件似乎也不起作用，所以我想知道如何解决这个问题的一般方法

您可以以为例，使用他们的自定义选项选择性别、出生月份和国籍

提前感谢。

问题是：假设有一个由Angular或React或其他框架编写的web应用程序，并呈现一个自定义的“选择”组件。OP希望找到一种无需任何框架代码（使用本机JavaScript或jQuery等）即可选择特定选项的通用方法

如果有一个通用的方法，它将是非常通用的：分析生成的HTML代码并动态更改内容。但是，不建议这样做，因为这样会带来麻烦

关于解决方案：分析生成的HTML并更改内容

由于它是自定义的，所以生成的HTML代码可以是任何东西。例如，问题中的生成了一组

，以显示选项和所选结果，无

选择

，无

选项

由于生成的HTML代码非常通用（可以是任何HTML），因此解决方案必须非常通用——分析生成的HTML并准备接受所有可能的结果

下面是一个使用AngularJS的简单示例：

为什么不推荐它？

上述解决方案只改变显示结果，不会改变web应用程序的内部状态，从而在web应用程序中引入不一致性

实际上，要改变web应用程序的内部状态，不可能在框架代码的“外部”使用本机javascript（除非通过黑客攻击框架）

以上述为例。即使更改了所选结果文本，web应用程序的

$scope.currentOption

也不会受到影响。实际上，在web应用程序内部是不可能改变任何东西的——框架之外的本机JavaScript甚至不知道选项的

id

，它只看到一些简单的HTML

div

解决方案

有一种解决方法：检索框架的内部状态对象（通过框架外部的本机JavaScript），然后操作该状态对象。然而，这是特定于框架的，不同的框架可能提供不同的方法。以下是AngularJS中的一个示例：