避免在dom中使用jquery重複選擇名稱

Question

請查看附加的jsfiddle。

我的預期輸出是

1）將選定的男孩分配到選定的男孩列。

2）避免重複選擇，因爲當頁面加載時我可能已經選擇了男孩。所以客觀應該是。 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()); 
});