Question

  <form:select id="name1"  
                <form:options items="${questionsMap}"/>
                </form:select>
 <form:select id="name2"  
                <form:options items="${questionsMap}"/>
                </form:select>
 <form:select id="name3"  
                <form:options items="${questionsMap}"/>
                </form:select>

问题地图来自枚举。任何人都可以帮助我在第一次选择后如何从questionsMap中删除问题，并在第二次选择时显示未选中的问题。

Answer 1

您无法在JSP上执行此操作，因为那里的代码将在服务器端运行 - 如果您不想对服务器执行额外的查询...那么最好的方法是使用JavaScript执行此操作。 Jquery选择器使这项任务变得简单。

建议：http://api.jquery.com/remove/

此外，您可能感兴趣的事件： http://api.jquery.com/change/

在那里你甚至可以找到一个例子......

只是把我的例子放在这里：

$( "select" ).change(function () {
    $( "select option:selected" ).each(function() {
          $( this ).remove();
    });
})

Answer 2

您可以简单地验证所选的相同选项，并在提交时显示错误消息，而不是从下拉列表中删除选项。

var validateSubmit = function() {
  var errors = [];//trace all errors here

  //fetch selected values from the drop-down starting name attribute with `name`
  var txt = $('select[name^=name]').map(function() {
    return this.value; //get current drop-down selected value
  }).get(); //get all value in array

  $.each(txt, function(i, v) {//loop in the selected values
    if (i !== $.inArray(v, txt)) {//inArray, gives -1 if not found else array index
      errors.push('Cannot select [' + v + '] more than once');
    }
  });

  var submit = 0 === errors.length//true if no errors, else false

  if (!submit) {
    alert(errors.join('\n'));//concat all errors with \n
  }

  return submit;//submit if true, else don't submit
};

$(function() {
  $('#form1').on('submit', validateSubmit);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id='form1'>
  <select name='name1'>
    <option>JS</option>
    <option>SQL</option>
    <option>XML</option>
  </select>

  <select name='name2'>
    <option>JS</option>
    <option>SQL</option>
    <option>XML</option>
  </select>

  <select name='name3'>
    <option>JS</option>
    <option>SQL</option>
    <option>XML</option>
  </select>
  <button>Submit</button>
</form>

OR

您可以简单地验证所选的相同选项，并在更改时显示错误消息。

var names;
var validateChange = function() {
  var errors = []; //trace all errors here

  //fetch selected values from the drop-down starting name attribute with `name`
  var txt = names.map(function() {
    return this.value; //get current drop-down selected value
  }).get(); //get all value in array

  $.each(txt, function(i, v) { //loop in the selected values
    if ('' !== v && i !== $.inArray(v, txt)) { //inArray, gives -1 if not found else array index
      errors.push('Cannot select [' + v + '] more than once');
    }
  });

  if (errors.length) {
    alert(errors.join('\n')); //concat all errors with \n
  }
};

$(function() {
  names = $('select[name^=name]');
  names.on('change', validateChange);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name='name1'>
  <option value=''>-- Select --</option>
  <option>JS</option>
  <option>SQL</option>
  <option>XML</option>
</select>

<select name='name2'>
  <option value=''>-- Select --</option>
  <option>JS</option>
  <option>SQL</option>
  <option>XML</option>
</select>

<select name='name3'>
  <option value=''>-- Select --</option>
  <option>JS</option>
  <option>SQL</option>
  <option>XML</option>
</select>

Answer 3

这是我制作的jquery代码，正是这样做的。还会留下空值（如果您在顶部有“请选择”）并重新插入未选择的值。它为页面上的所有选择元素执行此操作，如果您需要使用更具体的选项限制替换选择器$（“select”）：

$( document ).ready(function() {
  manageSelectValues();
  $("select").change(manageSelectValues); 
});

function manageSelectValues()
{
  $("select").each(function() {
      var id = $(this).attr('id');
    var value = $(this).find(":selected").val();
    if (value) {
      $("select[id!='" + id + "']").find("option").filter(function() { return this.value == value;}).remove();
    }
    $(this).find("option").filter(function() { return this.value != value;}).each(function() {
      var unselValue = $(this).val();
      $("select").filter(function() { return $(this).find("option").filter(function() { return this.value == unselValue;}).length == 0; }).append(
        $('<option></option>').val(unselValue).html(unselValue));
    })
  });
}

如何从选择jsp上的地图中删除选项？

3 个答案: