验证select（四个中的两个）以检查value是否为null且它们是否重复？

Question

我已经生成了一个选择框的组合，其中一个选择框的值依赖于另一个选择框，它由json数组完成（用于填充下拉列表），并且有一种方法可以生成这个动态结构（添加多行的6个选择值）。我已经实现了任何两个选中的值不应该相同但问题是用户必须只选择四个选择框中的两个，而另外两个它们应该是空白的。如何验证两者，即选择框的值不应该相同（除了两个空/空值），用户应该只选择两个不同的值（应该选择其他空白）。我附加这里的html和java脚本..你也可以看到this fiddle

<h4> Honours Selection</h4> 
<table class="tg" id="custom-fields">
  <colgroup>
    <col class="col-wide" />
    <col class="col-narrow" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
  </colgroup>
  <tr>
    <th class="tg-hgcj" rowspan="2">
      <br />Honours
    </th>
    <th class="tg-hgcj" colspan="4">General</th>
    <th class="tg-hgcj" colspan="2">Bank Transaction Details</th>
    <th class="tg-hgcj" rowspan="2">Add More</th>
  </tr>
  <tr>
    <td class="tg-093g">Sub1</td>
    <td class="tg-093g">Sub2</td>
    <td class="tg-093g">Sub3</td>
    <td class="tg-093g">Sub4</td>
    <td class="tg-093g">Bank Transaction id</td>
    <td class="tg-093g">Bank Transaction date</td>
  </tr>
  <tr>
    <td class="tg-30rh">
      <select name="hons[]" id="select1-0" onchange="">
        <option value="Hindi"  >Hindi  </option>
        <option value="Bengali">Bengali</option>
        <option value="English">English</option>
        <option value="History">History</option>
        <option value="Political Science">Political Science</option>
        <option value="Phylosophy">Phylosophy</option>
        <option value="Sanskrit">Sanskrit</option>
        <option value="Geography (Arts)">Geography (Arts)</option>
        <option value="Economics (Arts)">Economics (Arts)</option>
        <option value="Physics">Physics</option>
        <option value="Chemistry">Chemistry</option>
        <option value="Mathematics">Mathematics</option>
        <option value="Zoology">Zoology</option>
        <option value="Botany">Botany</option>
        <option value="Geography (Science)">Geography (Science)</option>
        <option value="Economics (Science)">Economics (Science)</option>
        <option value="Accountancy">Accountancy</option>
</select>
      <select id="ddl2" name="session[]">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub1[]" id="select2-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub2[]" id="select3-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub3[]" id="select4-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub4[]" id="select5-0">
      </select>
    </td>
    <td class="tg-30rh">
      <input type="text" name="tran_id[]" id="tranid-0" onfocus="checkDuplicatesHons(0)"/>
    </td>
    <td class="tg-30rh">
      <input type="text" name="tran_date[]" />
    </td>
    <td><a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

使用json添加动态行和填充选择值的脚本

var x = 1;

$(document).ready(function() {
  $(".addCF").click(function() {
    $("#custom-fields").append([
      '<tr>',
      '<td class="tg-30rh">',
      '<select name ="hons[]" id="' + 'select1-' + x + '">',
        '<option value="Hindi"  >Hindi  </option>',
        '<option value="Bengali">Bengali</option>',
        '<option value="English">English</option>',
        '<option value="History">History</option>',
        '<option value="Political Science">Political Science</option>',
        '<option value="Phylosophy">Phylosophy</option>',
        '<option value="Sanskrit">Sanskrit</option>',
        '<option value="Geography (Arts)">Geography (Arts)</option>',
        '<option value="Economics (Arts)">Economics (Arts)</option>',
        '<option value="Physics">Physics</option>',
        '<option value="Chemistry">Chemistry</option>',
        '<option value="Mathematics">Mathematics</option>',
        '<option value="Zoology">Zoology</option>',
        '<option value="Botany">Botany</option>',
        '<option value="Geography (Science)">Geography (Science)</option>',
        '<option value="Economics (Science)">Economics (Science)</option>',
        '<option value="Accountancy">Accountancy</option>',      
      '</select> ',
      '<select id="ddl2" name="session[]"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub1[]" id="select2-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub2[]" id="select3-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub3[]" id="select4-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub4[]" id="select5-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<input type="text" name="tran_id[]" id="tranid-' + x + '"onfocus="checkDuplicatesHons('+x+')""/>',
      '</td>',
      '<td class ="tg-30rh">',
      '<input type="text" name="tran_date[]" />',
      '</td>',
      '<td>',
      '<a href="javascript:void(0);" class="remCF">Remove</a>',
      '</td>',
      '</tr>'
    ].join(''));

    $('#select1-' + x).trigger('change');

    x++;
  });
  $("#custom-fields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});

var jsonObj = {
  "Hindi": [
    ["History", "Sociology", "Economics",""], "Philosophy", "Political Science", "English"
  ],
  "Bengali": [
    ["History", "Sociology",""], "Sanskrit", "Philosophy", "Political Science"
  ],
  "English": [
    ["History", "Sociology", "Economics",""], "Philosophy", "Political Science", ["Bengali", "Hindi"]
  ],
  "History ": ["Philosophy", " Political Science", ["Bengali", " Hindi",""], " English"],
  "Political Science": [
    [" History ", " Sociology", " Economics",""], "Philosophy", ["Bengali ", " Hindi",""], "English"
  ],
  "Philosophy": [
    [" History", " Sociology",""], " Sanskrit", "Political Science", ["Bengali", "Hindi",""]
  ]
};

function updateSelect(e) {
  var targetId = e.target.id;
  var id = parseInt(targetId.match(/[\w\d]+\-(\d+)$/)[1], 10);

  var getOpts = function(raw) {
    raw = Array.isArray(raw) ? raw : [raw, ''];

    return raw.map(function(obj) {
      return new Option(obj, obj);
    });
  };

  var newKey = $('#select1-' + id).val();

  var mappings = [2, 3, 4, 5].reduce(function(map, val, index) {
    var key = '#select' + val + '-' + id;
    map[key] = index;
    return map;
  }, {});

  var selected = jsonObj[newKey];

  $.each(mappings, function (selector, index) {
    $(selector).empty().append(getOpts(selected[index]));
  });
}

$(document).ready(function() {
  $('#custom-fields').on('change', 'select[id^="select1-"]', updateSelect);     
  $('#select1-0').trigger('change'); // For initial page load.
});

检查重复的脚本

function checkDuplicatesHons(id) {
    var k=10+6*parseInt(id);//id of the selectbox for the chacking
    alert(k);
  var selects = document.getElementsByTagName("select"),
      i,
      current,
      selected = {};

  for(i = k; i <= k+3; i++){
    //current = selects[i].selectedIndex;

    current = selects[i].options[selects[i].selectedIndex].value;//for selecting actual value
    alert(current);
    if (selected[current]) {
      alert("Each Subject should be selected once.");
      return false;
    } else
      selected[current] = true;
  }
  return true;
}

Answer 1

我稍微更改了java脚本，只是添加了一个可以计算select数量的标志，选择了除空白以外的值，如果它大于2，那么它将返回false并发出警告消息。你应该在你的json数组中添加无选项。

function checkDuplicatesHons(id) {
    var k=10+6*parseInt(id);
   var selects = document.getElementsByTagName("select"),
      i,
      current,
      selected = {},flag=0;

  for(i = k; i <= k+3; i++){
    current = selects[i].options[selects[i].selectedIndex].value;//for selecting actual value
    if(current=="")
      flag=flag+1;
  }
  if(flag==2)
  return true;
  else 
    {  alert("Select two subject,Leave 2 blank");
      return false;}
}

请参阅以下实现check在bin中使用js运行。