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。

由Jquery控制下拉框

2 个答案: