Question

请查看随附的jsfiddle。

我的预期输出是

1）将选定的男孩分配到选定的男孩栏目。

2）避免重复选择，因为我可能已经在页面加载时选择了男孩。所以客观应该是。

Techincal Issue 1）每当dropdpwn更改查看所有其他下拉选择的选项，并查看SELCTED BOY列顶部，看看我们是否已经选择了那个男孩。;

MY FIDDLE

http://jsfiddle.net/bharatgillala/pnzh255v/6/

<TABLE id=ctl00_contentBody_gvRoomAllocation class=mGrid style="WIDTH:   750px; BORDER-COLLAPSE: collapse" cellSpacing=0 border=0><TBODY>
<TR>
<TH scope=col>Room #</TH>
 <TH scope=col> BoyName</TH>
 <TH scope=col>Selected Boy</TH></TR>
<TR>
<TD style="WIDTH: 30px" align=left>1</TD>
<TD style="WIDTH: 60px" align=left><SPAN     id=ctl00_contentBody_gvRoomAllocation_ctl02_lblAvailableHE>Eleanor </SPAN>     <INPUT id=ctl00_contentBody_gvRoomAllocation_ctl02_HDN_ROOM_ID type=hidden     value=8 name=ctl00$contentBody$gvRoomAllocation$ctl02$HDN_ROOM_ID> </TD>
   <TD style="WIDTH: 60px" align=left><SELECT id=ctl00_contentBody_gvRoomAllocation_ctl02_ddlAvailableJudges class=judges   name=ctl00$contentBody$gvRoomAllocation$ctl02$ddlAvailableJudges> <OPTION   selected value=-1></OPTION> <OPTION value="Eleanor">Eleanor</OPTION> <OPTION value="Patricia">Patricia </OPTION> <OPTION   value="Pantaleoni">Pantaleoni</OPTION> <OPTION value="Dianne">Dianne </OPTION>      </SELECT> </TD></TR>
 <TR class=alt>
<TD style="WIDTH: 30px" align=left>2</TD>
<TD style="WIDTH: 50px" align=left><SPAN    id=ctl00_contentBody_gvRoomAllocation_ctl03_lblAvailableHE></SPAN><INPUT id=ctl00_contentBody_gvRoomAllocation_ctl03_HDN_ROOM_ID type=hidden value=9  name=ctl00$contentBody$gvRoomAllocation$ctl03$HDN_ROOM_ID> </TD>
  <TD style="WIDTH: 95px" align=left><SELECT      id=ctl00_contentBody_gvRoomAllocation_ctl03_ddlAvailableJudges class=judges name=ctl00$contentBody$gvRoomAllocation$ctl03$ddlAvailableJudges> <OPTION      selected value=-1></OPTION> <OPTION value="Eleanor , Rand"> Eleanor</OPTION>    <OPTION value="Patricia , Cardoso">Patricia </OPTION> <OPTION value="David ,     Pantaleoni">Pantaleoni</OPTION> <OPTION value="Dianne , Malone">Dianne </OPTION>      </SELECT> </TD></TR>
<TR>
<TD style="WIDTH: 90px" align=left>3</TD>
<TD style="WIDTH: 140px" align=left><SPAN      id=ctl00_contentBody_gvRoomAllocation_ctl04_lblAvailableHE>Patricia </SPAN> <INPUT id=ctl00_contentBody_gvRoomAllocation_ctl04_HDN_ROOM_ID type=hidden    value=10 name=ctl00$contentBody$gvRoomAllocation$ctl04$HDN_ROOM_ID> </TD>
<TD style="WIDTH: 95px" align=left><SELECT   id=ctl00_contentBody_gvRoomAllocation_ctl04_ddlAvailableJudges class=judges   name=ctl00$contentBody$gvRoomAllocation$ctl04$ddlAvailableJudges> <OPTION  selected value=-1></OPTION> <OPTION value="Eleanor , Rand">Eleanor</OPTION>     <OPTION value="Patricia , Cardoso">Patricia </OPTION> <OPTION value="David ,  Pantaleoni">David</OPTION> <OPTION value="Dianne , Malone">Dianne </OPTION>         </SELECT> </TD></TR></TBODY></TABLE>

Answer 1

假设选择上方的跨度是值所在的位置，我认为这就是您需要的

$('select').on('change', function() {
    var $el = $(this);
    $el.closest('span').text($el.val());
});

使用jquery避免在dom中重复选择名称

1 个答案: