javascript - 使用 Jquery 选择两个下拉值

Question

我有一个下拉菜单，我需要在其中使用 Jquery 获取值。

请从我的 watch 中查看复制粘贴的行:

-       $("[id$='ddlEmployee']")    {...}   Object
+       [Methods]       
+       [0] {Count = 4} DispHTMLSelectElement
+       [1] {Count = 4} DispHTMLSelectElement
+       context {object}    DispHTMLDocument
        jquery  "1.7.2" String
        length  2   Number
+       prevObject  {...}   Object
        selector    "[id$='ddlEmployee']"   String

控件名称是ddlEmployee，由于在同一个页面中有两个ddlEmployees，所以它有两个数组[0]和[1]..，你可以从上图中看到

每个数组都有选定的值。 (该页面的第一个和第二个下拉菜单)。

我想获取每个下拉列表的选定值

我在下面尝试过:但没有成功

1. $("[id$='ddlEmployee']")[0].value 这个值永远是第一个下拉列表第一项
2. $("[id$='ddlEmployee']")[0][0].value 这也与上面的第一个下拉列表第一项相同
3. $("[id$='ddlEmployee']")[0][0].val() 对象不支持此属性或方法错误
4. $("[id$='ddlEmployee']")[0].val() 对象不支持此属性或方法错误
5. $("[id$='ddlEmployee']")[1].val() 对象不支持此属性或方法错误
6. $("[id$='ddlEmployee']").text() "-Select- value1 value2 value3 -Select- value1 value2 value3"字符串
7. $("[id$='ddlEmployee']")[0].text() 对象不支持此属性或方法错误
8. $("[id$='ddlEmployee']")[1].text() 对象不支持此属性或方法错误

只有第 6 点我得到了一些值(value)。但这不足以区分哪个下拉列表的选定值。

如何编写代码，选择第一个和第二个下拉列表的值？

请看下面的HTML代码:

<DIV class="datagrid margin-10px-left margin-10px-right"><DIV>
<TABLE style="WIDTH: 100%; BORDER-COLLAPSE: collapse" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa class=datagrid border=1 rules=all cellSpacing=0>
<TBODY>
<TR>
<TH style="WIDTH: 90px" scope=col>DOA Name *</TH>
<TH scope=col>DOA For</TH>
<TH style="WIDTH: 80px" scope=col>Start Date *</TH>
<TH style="WIDTH: 80px" scope=col>End Date *</TH>
<TH scope=col>Remarks</TH>
<TH scope=col>&nbsp;</TH></TR>
<TR>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_txtName class=validate[DOAGridrequired] value="Fin Jack Uppal" readOnly type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$txtName jQuery17205721116313179826="5"> <A id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_lnkAddEmployee class=margin-20px-left href="javascript:__doPostBack('ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$lnkAddEmployee','')">Select</A> <!-- Added for Grid Level Ajax    --><!-- End of Grid Level Ajax  --></TD>
<TD><SELECT style="WIDTH: 120px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_ddlDOAFor class=validate[required] name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$ddlDOAFor jQuery17205721116313179826="6"> <OPTION value=0>- Select -</OPTION> <OPTION selected value=TravelAuthorization>TravelAuthorization</OPTION> <OPTION value=ExpenseReporting>ExpenseReporting</OPTION></SELECT> </TD>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_txtStartDate class=validate[DOADaterequired,DOApast[NOW],DOAdateRange[grp1],DateAddedXDays[21],custom[dd/mm/yyyy]] value=27/09/2012 type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$txtStartDate jQuery17205721116313179826="7"> <INPUT style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_imgCal src="/Style%20Library/images/icon-cal.gif" type=image name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$imgCal> </TD>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_txtEndDate class=validate[DOADaterequired,DOApast[NOW],DOAdateRange[grp1],DateAddedXDays[21],custom[dd/mm/yyyy]] value=27/09/2012 type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$txtEndDate jQuery17205721116313179826="8"> <INPUT style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_imgCal3 src="/Style%20Library/images/icon-cal.gif" type=image name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$imgCal3> </TD>
<TD><TEXTAREA style="WIDTH: 100%" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl02_txtRemark class="validate[maxSize[250],DOARemarksInsidePage ]" rows=2 cols=20 name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl02$txtRemark jQuery17205721116313179826="9"></TEXTAREA> </TD>
<TD><A href="javascript:__doPostBack('ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa','Select$0')"><IMG title="Remove row" border=0 src="/Style Library/images/icon-delete.gif"></A></TD></TR>
<TR style="BACKGROUND-COLOR: #f2f2f2" class=alt>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_txtName class=validate[DOAGridrequired] value="CCA Kanokporn Choochan" readOnly type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$txtName jQuery17205721116313179826="10"> <A id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_lnkAddEmployee class=margin-20px-left href="javascript:__doPostBack('ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$lnkAddEmployee','')">Select</A> <!-- Added for Grid Level Ajax    --><!-- End of Grid Level Ajax  --></TD>
<TD><SELECT style="WIDTH: 120px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_ddlDOAFor class=validate[required] name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$ddlDOAFor jQuery17205721116313179826="11"> <OPTION value=0>- Select -</OPTION> <OPTION selected value=TravelAuthorization>TravelAuthorization</OPTION> <OPTION value=ExpenseReporting>ExpenseReporting</OPTION></SELECT> </TD>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_txtStartDate class=validate[DOADaterequired,DOApast[NOW],DOAdateRange[grp1],DateAddedXDays[21],custom[dd/mm/yyyy]] value=27/09/2012 type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$txtStartDate jQuery17205721116313179826="12"> <INPUT style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_imgCal src="/Style%20Library/images/icon-cal.gif" type=image name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$imgCal> </TD>
<TD><INPUT id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_txtEndDate class=validate[DOADaterequired,DOApast[NOW],DOAdateRange[grp1],DateAddedXDays[21],custom[dd/mm/yyyy]] value=27/09/2012 type=text name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$txtEndDate jQuery17205721116313179826="13"> <INPUT style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_imgCal3 src="/Style%20Library/images/icon-cal.gif" type=image name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$imgCal3> </TD>
<TD><TEXTAREA style="WIDTH: 100%" id=ctl00_PlaceHolderMain_SPWebPartManager_g_00ed9bd7_7fe8_45be_a81e_9898c9819caf_ctl00_gdvDoa_ctl03_txtRemark class="validate[maxSize[250],DOARemarksInsidePage ]" rows=2 cols=20 name=ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa$ctl03$txtRemark jQuery17205721116313179826="14"></TEXTAREA> </TD>
<TD><A href="javascript:__doPostBack('ctl00$PlaceHolderMain$SPWebPartManager$g_00ed9bd7_7fe8_45be_a81e_9898c9819caf$ctl00$gdvDoa','Select$1')"><IMG title="Remove row" border=0 src="/Style Library/images/icon-delete.gif"></A></TD></TR></TBODY></TABLE></DIV></DIV>

Answer 1

jsFiddle Demo

使用 [ ] 索引返回底层 DOM 对象，它不是 jQuery 对象，因此不支持 jQuery 方法。使用 jQuery 方法过滤集合 .eq() :

$("[id$='ddlEmployee']").eq(0).val();
$("[id$='ddlEmployee']").eq(1).val();