处理所需的空值选择在MSIE中不起作用

时间:2018-01-09 13:27:09

标签: html forms required

我有这个HTML:

<form name="form1" id="form1" action="#">
  <select id="u2p" name="u2p" size="10" multiple="multiple" required="required">
    <option value="">[None]</option>
    <option value="1">Firefox</option>
    <option value="2">Chrome</option>
    <option value="3">MS Explorer</option>
  </select>
  <input type="submit" value="Submit" id="submit1" />
</form>

我使用<option value="">[None]</option>,因为一旦选择了某个项目,就无法清除选择列表。

它适用于Firefox和Chrome,但不适用于MSIE。当用户在MSIE中选择[None]并尝试提交表单时,他会在select周围获得红色边框,并且“您必须从列表中选择一个项目”消息。提交是不可能的。

有人知道一个简单的解决方法吗?我宁愿保留value="",否则我必须改变很多这样的代码:

// Select '[None]' if nothing is selected:
if ( $("#u2p :selected").length == 0 ) $("#u2p").val("");

// Clear all values (1,2,3) if user selects '[None]'
$("select").change(function() { 
   if ( $.inArray("", $(this).val()) != -1 ) $(this).val(""); 
});

1 个答案:

答案 0 :(得分:1)

如果选择了所需的“NONE”,那么您在select上需要但想要发送空是有点奇怪。如果要删除NONE或必需,请使用CTRL-Click取消选择。

如果没有,那么这个怎么样:

function toggleU2p() {
  var show = $("#u2pcheck").is(":checked");
  $("#u2pdiv").toggle(show);
  if (!show) {
    $("#u2p option:selected").prop("selected",false);
  }
}
$(function() {
  $("#u2pcheck").on("click",toggleU2p);
  toggleU2p();
});
#u2pdiv {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form name="form1" id="form1" action="#">
  <input type="checkbox" id="u2pcheck" />Do you use a browser?
  <div id="u2pdiv">
    <select id="u2p" name="u2p" size="3" multiple="multiple" required="required">
      <option value="1">Firefox</option>
      <option value="2">Chrome</option>
      <option value="3">MS Explorer</option>
    </select>
  </div><br />
  <input type="submit" value="Submit" id="submit1" />
</form>