如何使用Javascript/jquery从动态下拉列表中访问值
我创建了一个动态下拉列表。我想访问从动态创建的下拉列表中选择的值。我的超文本标记语言文件
<!DOCTYPE html>
</head>
<body>
<table align="center" cellspacing="3" cellpadding="3">
<tr>
<td>County Name: </td>
<td><select id="county"><option value="">Select county</option></select></td>
</tr>
<tr>
<td>City: </td>
<td><select id="city"><option value="">Select city</option></select></td>
</tr>
</table>
<button class="btn" onclick="doThis()"">Go</button>
</body>
我的js文件：
function doc(id){return document.getElementById(id);}
function buildCounty(){
var opts=doc('county').options;
for(var i=0;i<arr.length;i++){
opts[opts.length]=new Option(arr[i][0],arr[i][0]);
}
doc('county').onchange=function(){
this.blur();
var val=this.value;
if(!val){return;}
var co=doc('city').options;
co.length=1;
for(var j=0;j<arr.length;j++){
if(arr[j][0]!==val){continue;}
else{
var temp=arr[j][1];
for(var k=0;k<temp.length;k++){
co[co.length]=new Option(temp[k],temp[k]);
}
break;
}
}
}
}
function doThis(){
}
window.onload=buildCounty;
</script>
单击按钮，就会调用js文件中存在的doThis（）函数。在该函数中，我想访问在第二个（城市列表）下拉列表中选择的值。
共有2个答案
看起来您可以为此列表利用更多的jQuery。
首先，在Jquery中不需要这一行：
function doc(id) { document.getElementyById(id); }
您可以使用CSS选择器使用jQuery获取元素：
$("#id-of-element");
您甚至可以将其分配给变量：
var countyDropdown = $("#county");
此外，运行jQuery的“更好”方法之一是将脚本标记放在文档末尾，然后等待文档引发ready事件：
$(document).ready(function () { .... });
下面是我编写的一个快速代码笔，它利用jQuery动态填充另一个下拉列表中的下拉列表。它还设置了go按钮，以便在单击时执行某些操作。
codepen动态下拉选择
在jQuery中，您可以执行以下操作：我可以看到您对city选项没有任何值。这是您无法获得值的原因吗？如果是，那么您也需要在标记中填充这些值。
function doThis() {
console.log($('#city').val());
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" cellspacing="3" cellpadding="3">
<tr>
<td>County Name: </td>
<td><select id="county"><option value="">Select county</option></select></td>
</tr>
<tr>
<td>City: </td>
<td><select id="city"><option value="SomeValue">Select city</option></select></td>
</tr>
</table>
<button class="btn" onclick="doThis()" ">Go</button>-
问题内容： 在ASP .NET MVC Razor视图中，我有一个下拉列表，如下所示： DeviceModelList只是一个SelectList。 如何根据客户端操作（例如单击按钮或使用Javascript / jQuery/Ajax进行的其他下拉选择）动态填充DeviceModelList？ 问题答案： 您可以将此下拉列表局部化： 然后在主视图中将其包含在某个容器中： 那么您可能会有一个控制器
-
问题内容： 我正在开发一个下拉菜单，该菜单使用HTML optgroups作为员工所属的组名。这是MySQL查询和输出： 唯一的问题是，我很难确定如何使optgroup正常工作。我尝试了无数次，这真的开始让我感到沮丧。 以下是我想要的输出示例（示例）： 基本上，optgroup必须是“ groupname”，选项“ name”应该是“ emp_id”，而动作“ option”（下拉项）是“ emp
-
问题内容： react-bootstrap站点中的示例代码显示以下内容。我需要使用数组来驱动选项，但是在查找将要编译的示例时遇到了麻烦。 问题答案： 您可以从这两个功能开始。第一个将基于传递到页面的道具动态创建您的选择选项。如果将它们映射到状态，则选择将自行重新创建。 然后，您将在render内部拥有此代码块。您将传递一个对onChange道具的函数引用，每次调用onChange时，所选对象将自动
-
下面给出了一段表示下拉列表的代码。我需要在此下拉列表中选择日期值，由<代码> 以下方法无效 1。）使用“按导入组织选择”选择此值。openqa。硒。支持用户界面。选择 控制台显示： 元素应该是“选择”，但应该是“选项” 2.）首先单击下拉列表以显示要选择的选项，然后单击该选项。 控制台显示： 调试元素缺少可访问的名称：id：类型，标记名：选择，类名：文本输入ng原始ng未触及ng有效ng范围 3.
-
我明白我需要用硒，但我不知道怎么用。结果始终是单个字符串的列表。理想情况下，我希望返回两个列表：一个带有unix datestamp（option value=“1576627200”），另一个带有“normal”日期（即18/12/2019）的列表。 任何帮助都将不胜感激。
-
问题内容： 我有以下问题： 我开始用HTML和JS创建表单，并且有两个下拉菜单（国家和城市）。现在，我想使用JQuery使这两个动态，以便仅显示所选国家/地区的城市。 我从一些基本的JS入手，但效果不错，但在IE中却有些麻烦。现在，我正在尝试将JS转换为JQuery，以获得更好的兼容性。 我原来的JS看起来像这样： 我知道这很简单，但是我看不到树木的木头。 问题答案： 它应该像