Jquery的投箱控制

Question

我在我的HTML代碼中有幾個問題，每個問題都有排名問題。排名選擇是下拉列表，排名從1到3。

我想驗證相同的等級在同一個問題中沒有被多次使用過。這是我的HTML：

<div> 
 
    <span id="questionnaire-question">Q1)&nbspPlease QuestionA</span> 
 
    <table> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>A1</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[13]" class="02A" group="02A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>A2</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[14]" class="02A" group="02A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>A3</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[15]" class="02A" group="02A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>A4</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[16]" class="02A" group="02A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<div> 
 
    <span id="questionnaire-question">Q2)&nbspPlease QuestionB</span> 
 
    <table> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>B1</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[21]" class="03A" group="03A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>B2</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[22]" class="03A" group="03A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>B3</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[23]" class="03A" group="03A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr style="width: 365px;"> 
 
     <td> 
 
     <label>B4</label> 
 
     </td> 
 
     <td> 
 
     <select name="ranking[28]" class="03A" group="03A"> 
 
      <option value="">Please Rank</option> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

謝謝！

Answer 1

您可以使用此代碼,,我只提出警告，它需要選擇新值的用戶,,但你可以做任何你需要..

// event when select change 
$('select').on('change', function(evt){ 
    // parent table, one question ref 
    var Q = $(this).closest('table'); 
    // iterate all answers to have diff res 
    for(var i = 0; i < $(Q).find('select').length; i++){ 
     // console.log(parseInt($(Q).find('select').eq(i).val())) 
     if(parseInt($(Q).find('select').eq(i).val()) && 
      !$(Q).find('select').eq(i).is($(this)) && 
      $(Q).find('select').eq(i).val() == $(this).val()){ 
      alert ('Choose another Rank please!'); 
      $(this).prop('selectedIndex',0); 
     } 
    } 
}) 

這裏見活生生的例子：http://codepen.io/mkdizajn/pen/RKpLwX?editors=0010

Answer 2

您可以使用jquery或javascript。我已完成使用jquery。這裏是jsfiddle。