javascript - 验证选择(四分之二)以检查值是否为空并且它们不重复？

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脚本进行了一些更改，只是添加了一个标志，可以计算选择的值不是空白的选择数量，如果它大于2，那么它将返回 false 并给出警报消息。you应该在你的 json 数组中添加 none 选项。

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运行。