jQuery를/자바 스크립트 변경 옵션을 선택

Question

나는 다음과 같은 코드가 있습니다 jsFiddle에서

<table> 
<tr><td>Item</td><td>Ranking</td></tr> 
<tr><td>Apples</td><td><select id="apple" name="apple"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Oranges</td><td><select id="oranges" name="oranges"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Bananas</td><td><select id="bananas" name="bananas"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Lemons</td><td><select id="lemons" name="lemons"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Limes</td><td><select id="limes" name="limes"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 

그리고 여기 : http://jsfiddle.net/XNYU2/

그렇다면 나는이 가능한 경우 이해하려고 노력하고 있어요을 , jQuery 또는 Javascript가 가장 좋은 솔루션인지 여부와 어떻게 진행되는지에 대해 알아 보겠습니다.

랭킹 시스템이고 내가해야 할 일은 간단합니다. 사용자가 드롭 다운에서 값을 선택하면 해당 값을 다른 드롭 다운에서 제거해야합니다. 반대로 사용자가 해당 값의 선택을 취소하면 모든 드롭 다운으로 돌아와야합니다.

Answer 1

이보십시오.

질문을 다시 읽으면 동일한 결과가 나올 수 있지만 약간 다를 수 있습니다. 사용자는 겹침없이 정렬 된 랭킹 집합을 1 세트 만 갖도록 강요하지만 옵션 제거/추가 문제로 갈 필요가 없습니다.

Answer 2

예, 이것은 JavaScript의 작업입니다. jQuery는 JavaScript의 대안이 아니지만 기본적으로 브라우저 요소를 조작하기가 쉬운 도구 모음입니다. 효과적으로 사용하려면 JavaScript 기초를 이해해야하지만 사용하는 것이 좋습니다.

여기서 핵심은 문제를 해결하는 것입니다. 하나는 Select가 변경되면 작업을 수행하는 것입니다. 이 작업이 수행되는 방법은 다음을 참조하십시오. http://api.jquery.com/change/

두 번째 작업은 실제로 변경 사항을 구현하는 것입니다.

$(function() { 
    $('select').on('change', function(event){ // This binds listeners to the change event on all the select elements 
     var sId = this.id; // store off the changed element id 
     var vId = this.value; // store off the changed element value 
     $('select').each(function(){ // this loops across the same set of elements 
      if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something 
       this.options.selectedIndex = 0; // reset the value to 'rank' 
      } 
     }); 
    }); 
}); 

당신은 jQuery를 또는 순수 JS 중 하나에서이 작업을 수행 할 수 있지만, jQuery를 선택기 확실히 요소를 통해 루프를 쉽게하고 아주 작은 코드 변화에 대한 조치를 적용 : 여기 Removing an item from a select box

Answer 3

jsFiddle는 여기에 그 코드입니다 :

var SelectOptions = ['Rank...', 1, 2, 3, 4, 5]; 

$(document).ready(function() { 

    $('#TheTable').find('select').change(function() { 

     var TheSelectedValue = parseInt($(this).val(), 10); 
     var TheSelectID = $(this).prop('id'); 
     var TheHTML = ""; 

     for (var i = 0; i < SelectOptions.length; i++) { 

      if (SelectOptions[i] !== TheSelectedValue) { 

       TheHTML = TheHTML + '<option value="'; 
       TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i]; 
       TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>'; 
      } 
     } 

     $('#TheTable').find('select').each(function() { 

      if ($(this).prop('id') !== TheSelectID) { 

       $(this).html(TheHTML);   
      } 
     }); 
    }); 
}); 

그것을 할 수있는 하나의 방법이다 : 나는 몇 분 안에 함께 넣어 나는 그것을 향상시킬 수 확신하지만해야 너 시작 했어.