如何从选择 jsp 上的映射中删除选项

How to remove options from map on selection jsp?

本文关键字：映射 删除 选项 选择 jsp      更新时间：2024-05-31
  <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>

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

你不能在JSP上这样做，因为那里的代码将在服务器端运行 - 如果你不想对服务器进行额外的查询......所以最好的方法是用JavaScript来做。Jquery 选择器使这项任务变得容易。

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

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

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

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

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

无需从下拉列表中删除选项，您只需验证所选的相同选项并在提交时显示错误消息。

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>

或

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

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>

这是我制作的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));
    })
  });
}
相关文章：