javascript - Jquery を使用して 2 つの Drowndown 値を選択する

Question

Jquery を使用して値を取得する必要があるドロップダウンがあります。

私の時計からコピーペーストされた行を見てください：

-       $("[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 です。同じページに 2 つの ddlEmployees があるため、[0] と [1] の 2 つの配列があります。上の図からわかります。

各配列には選択された値があります。(そのページの最初と 2 番目のドロップダウン)。

各ドロップダウンの選択値を取得したい

私は以下を試しました：しかし、うまくいきませんでした

$("[id$='ddlEmployee']")[0].value この値は常に最初のドロップダウンの最初の項目になります
$("[id$='ddlEmployee']")[0][0].value これも上記の最初のドロップダウンの最初の項目と同じです
$("[id$='ddlEmployee']")[0][0].val() オブジェクトはこのプロパティまたはメソッドエラーをサポートしていません
$("[id$='ddlEmployee']")[0].val() オブジェクトはこのプロパティまたはメソッドエラーをサポートしていません
$("[id$='ddlEmployee']")[1].val() オブジェクトはこのプロパティまたはメソッドエラーをサポートしていません
$("[id$='ddlEmployee']").text() " -Select- value1 value2 value3 -Select- value1 value2 value3" 文字列
$("[id$='ddlEmployee']")[0].text() オブジェクトはこのプロパティまたはメソッドエラーをサポートしていません
$("[id$='ddlEmployee']")[1].text() オブジェクトはこのプロパティまたはメソッドエラーをサポートしていません

6番目のポイントについてのみ、私は何らかの価値を得ています。しかし、それはどのドロップダウンの選択された値を区別するのに十分ではありません.

コードを書き、最初と 2 番目のドロップダウンの値を選択する方法は?

以下の 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>

score 3 · Accepted Answer

jsFiddle デモ

インデックスを使用[ ]すると、基になる DOM オブジェクトが返されますが、これは jQuery オブジェクトではないため、jQuery メソッドをサポートしていません。jQuery メソッドを使用してセットをフィルタリングします.eq()。

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

javascript - Jquery を使用して 2 つの Drowndown 値を選択する

1 に答える 1

Related

Reference