如何根据angularjs onchange中下拉选项的选定值在div上添加动态id
在AngularJS中，可以通过使用ng-change指令来监听下拉选项的变化，并在变化时执行相应的操作。要根据选定值在div上添加动态id，可以按照以下步骤进行操作：
- 在HTML文件中，使用ng-model指令将下拉选项的值绑定到一个变量上，例如：
<select ng-model="selectedValue" ng-change="addDynamicId()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>- 在控制器中，定义一个函数addDynamicId()，用于根据选定值添加动态id。在该函数中，可以根据选定值来生成一个动态id，并将其赋值给div的id属性，例如：
$scope.addDynamicId = function() {
// 根据选定值生成动态id
var dynamicId = "dynamicId_" + $scope.selectedValue;
// 将动态id赋值给div的id属性
angular.element(document.querySelector('#myDiv')).attr('id', dynamicId);
};- 在div元素上添加一个初始的id属性，以便在选定值变化前有一个默认的id，例如：
<div id="myDiv">This is a div</div>这样，当下拉选项的选定值发生变化时，AngularJS会自动调用addDynamicId()函数，根据选定值生成动态id，并将其赋值给div的id属性，实现在div上添加动态id的效果。
关于AngularJS的更多信息和使用方法，可以参考腾讯云的AngularJS产品文档： AngularJS产品介绍
相关·内容
在这里我有选择框，当下拉菜单改变时，我需要根据下拉菜单中所选选项的值在div上添加动态id .I已经在警告中提到了什么id to add onchange.Here是下面的代码 html <scriptsrc="https://ajax.googleapis.com/ajax
浏览 12提问于2019-01-11得票数 1
回答已采纳
我正在动态生成dropdowns e.g.someDropDown0，someDropDown1，someDropDown2 ...etc，并在页面中写一个div。我想知道如何将"selected“选项值设置为drop的onChange。
当我添加一个新的下拉按钮时，旧下拉按钮的值被重置为"Select one“。需要一个<e
浏览 0提问于2012-01-16得票数 1
回答已采纳
3回答
按代码选择下拉设置活动值
、、、、
我动态地根据列表的内容填充下拉列表的值。当选择下拉列表中的项时，将显示删除此项的选项。当项目被删除时，首先从列表中删除它，然后重新构建下拉列表，这就是我遇到问题的地方。而不是在重新构建下拉列表时将其返回到其默认值，而是将位于移除的值下面的值
浏览 4提问于2020-03-09得票数 4
回答已采纳
1回答
这里有一个小脚本，它根据下拉列表中选择的选项显示/隐藏某些DIVs。(("inquiry" + ++i)); document.getElementById(this.value).style.display = 'block';这个脚本基本上只是检查在下拉列表中选择了哪个值(即value="inquiry1")，然后用ID更改DIV<em
浏览 1提问于2017-05-04得票数 0
回答已采纳
1回答
我想要生成基于复选框更改值的动态表单。假设我有一个父选项框： <option value="1">Fruit</option> <option value="4
浏览 2提问于2017-12-28得票数 0
我有一个html选择下拉列表与5个选项(汽车制造商列表)，在这里用户点击一个选项和onchangeHandler将获得选定的值。根据选定的值，将向用户显示另一个下拉列表(汽车型号列表)。但是，如果我在汽车制造商的列表中只有一个选项，我需要在carManufacturer下拉列表中将其显示为预先选择(我可以)，并
浏览 10提问于2018-12-20得票数 0
我有一个添加按钮，它映射多个选择下拉列表。基本上，当我单击add时，我可以继续添加更多的下拉列表。{MainForm && MainForm.map((element:any, id:any) =&
浏览 1提问于2022-09-15得票数 1
2回答
我在下拉列表中使用了"select“。下面是编码。<div class="ui-grid-col-6"> <select name="status" formControlName<option *ngFor="let PurchaseOrderStatus of allPurchaseOrderStatus" value="{{
浏览 0提问于2019-04-03得票数 2
我使用jQuery动态地向html选择添加选项，同时设置默认值，但默认值未显示。 <select id="f_id" class="form-control"></div>
浏览 1提问于2015-11-11得票数 0
回答已采纳
我有一个下拉列表，当选择一个选项时，我希望将该值发送给控制器，在所需输入中替换返回的值。Html输入：<input class="form-controljs-inputs" id="fa-horse&
浏览 5提问于2022-01-27得票数 0
我的<script></script>在启动时加载onchange函数( onchangeFunction() )。这意味着如果没有onchange事件(从下拉表单中选择)实际发生了。这意味着访问空/不可用变量的函数结束引发异常。style="font-family:arial"> הזמנת כרטיסים: </h2>
<select name="Theater
浏览 2提问于2011-04-03得票数 0
我正在开发一个可以在网页上添加按钮的UserScript。单击时，我正在处理的一个按钮将创建一个弹出式div。我试图在弹出窗口中创建一个动态选择/选项下拉列表，其中的选项来自一个数组。对于第二个下拉列表，我试图根据上一个下拉列表中的选择创建一个动态下拉列表，但我不确
浏览 2提问于2021-09-14得票数 0
5回答
在一个使用ngx转换服务的带有PrimeNG组件的角4应用程序中，我还想转换下拉列表的selectedOption，而不仅仅是下拉的选项。 </p-dropdow
浏览 19提问于2017-10-02得票数 1
回答已采纳
我想让下拉列表B在默认情况下禁用。<label for="new">New staff join Date: </label>
浏览 7提问于2022-07-19得票数 1
回答已采纳
我在jQuery中有以下代码。我想知道在角Js 1.x版本中，上面的等效代码是什么？<select id="select"> <option value="2" data-foo="
浏览 2提问于2018-05-09得票数 1
回答已采纳
1回答
如何从函数返回筛选的组件
、、、
我必须根据下拉选择筛选值。所以基本上我有10张卡片，显示不同的状态，红色，黄色，蓝色。我有一个下拉菜单，它可以帮助我根据颜色过滤那些卡片。让我说，如果我在下拉圆中选择黄色，那么所有的4张红色卡片都会出现在我的屏幕上。我已经开始写代码，但被夹在中间。如果有人能帮我做这件事就太好了。={this.OnChange}
浏览 4提问于2020-07-14得票数 0
回答已采纳
1回答
我想在下拉列表中以angularjs显示选定的值。 in customers track by c.id" ng-change="onChange">
<option value="" selected hidd
浏览 0提问于2018-06-11得票数 0
回答已采纳
1回答
我有一个由几个部分组成的页面，我试图根据用户从下拉列表中选择的内容加载这些内容。基本上，下拉有像INV和BTW这样的选项，所以我需要在此基础上加载Ui视图。<div ui-view="name of view e.g. INV"></div>
视图的名称应根据所选选项<
浏览 2提问于2016-06-13得票数 0
回答已采纳
我使用yii2动态表单wbraganca来创建动态rows.This对我来说工作得很好。我在表单中有一个类别下拉列表，其中onchange im根据下拉列表中的值加载a。下拉列表中的值是否为其他？然后我加载这个div，它有一个文本框，用户可以在其中输入他的其他类别。
当我点击新的行时，这个<e
浏览 0提问于2017-02-24得票数 0
我有一个表单，用php保存用户在提交时输入的值。有些字段在div中显示:隐藏到onclick或onchange函数更改该div以显示。
如何在表单提交后仅显示包含保存值的字段的div？第二个span (id=jobslist)内容在进行选择时使用innerHTML调用的结果由innerHTML填充。在<
浏览 0提问于2014-07-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
