Question

我想要一个HTML [select]元素，允许用户只需单击（而不是通过按住Shift键或按住控件单击）即可进行多项选择，并且我希望表单在他们这样做时提交。我可以实现这些行为中的任何一种，但不能同时实现。第一个行为的代码出现在

中

http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html

随后在此论坛上引用

How to choose more than one option from a select box

我已尝试但未能调整代码以使表单提交同时保留多选行为。基本上，无论我在哪里嵌入submit（）;它禁止多选（我简单地通过先执行）。通过其他控件激活提交保留了多选，因此它不会回发到丢失选择的服务器。我尝试在addSelect事件中添加一行

function addSelect(id)
{
  var sel = document.getElementById(id);
  addEvent(sel, 'click', whichElement);
  addEvent(sel, 'click', addRemoveClicked);
  addEvent(sel, 'click', doSubmit);
}

function doSubmit(e) {
  document.forms[0].submit();
}

表单提交但不保留多选行为。

我尝试将onchange，onclick甚至onmouseout添加到[select]元素的声明中，但结果相同。

我承认我并不完全理解Paul Nelson最初提供的JS是如何工作的，所以我不知道还有什么可以尝试 - 有人可以提出建议吗？

Answer 1

我同意混淆浏览器处理元素的“标准”或本机方式不是一个好主意。

也就是说，您可以设置超时功能，以便在给定时间过后触发提交页面。您还可以检查select是否至少有一个选定元素（以防止提交没有值）。

因此，每次单击select元素时，都会创建一个新的超时函数（并丢弃旧函数）。

您需要定义一个全局变量来保存超时函数，以便在页面提交之前在select元素上进行新的单击时能够中止。

<script type="text/javascript">
    var timeoutObj;
</script>

然后：

function addSelect(id) {
    var sel = document.getElementById(id);
    addEvent(sel, 'click', whichElement);
    addEvent(sel, 'click', addRemoveClicked);
    addEvent(sel, 'click', doSubmitOnTimeout);
}

function doSubmitOnTimeout(e) {
    clearTimeout(timeoutObj);
    if (document.getElementById(this.id).selectedIndex > -1) {
    timeoutObj = setTimeout(function(){
        document.forms[0].submit();        
    },2000);
}

此代码将在最后一次点击select元素后2秒钟提交您的页面。

<强>更新

我使用你在问题中提到的代码来实现多项选择，而无需按住“ctrl”键。

警告将在您最后一次点击后2秒触发，只有在选择了某些内容时，才会显示所选项目的索引。

如果您想自己运行它，请确保在测试页面内部的标签之间添加JS，或者更好，使用单独的.js文件并从标签中引用它。

第二次更新：

我认为您对表单提交过程中涉及的一些不同概念感到有点困惑。

每当您提交表单时，都会使用以下两种表单提交方法之一（在方法<中指定）将其发送到服务器（到操作属性中指定的目标） / strong> attribute）：GET或POST。

您可以在我在评论中添加的链接中了解这两者的区别。但是，根据经验，如果没有预期网站状态的变化，例如当有人从您的网站请求某些内容时，则会使用GET。当用户以某种方式影响您的网站状态时（例如，当您在网站页面上注册或下订单时），就会使用POST。恕我直言，如果你总是使用POST方法，你就不会错。

关于你的问题，顺便说一下，我似乎无法完全理解，让我指出一些注意事项：

无论您使用的服务器端平台（无论是PHP，Java，ASP.NET还是其他），当您提交表单时，信息都会发送到服务器和目标页面（操作属性）已加载。

在我提供的示例中，我使用相同的页面，因此在提交表单后，加载了相同的页面。由于我使用普通的HTML + javascript（因此没有服务器端逻辑），一旦页面重新加载，之前选择的项目就会丢失，因为页面是“从头开始”加载的，这是第一次。
< / LI>

如果要在页面重新加载后保留所选选项的状态，则需要通过执行某些服务器端编程来执行此操作。有点像explained here should get it done if you are using PHP。

现在，一旦您完成了第3部分，您应该能够在提交表单后重新加载页面，然后保留在提交表单之前选择的项目。此时，如果要修改所选项目的列表，仍需要更新示例页面中的javascript代码，以便它能够跟踪预先选择的项目（如果愿意，可以选择默认情况下）。页面加载。

我已经更新了这个例子来考虑这个问题。以下是新示例的链接：http://jsfiddle.net/WZ2BZ/1/。

我已将其设置为“选项2”现在是预先选择的选项，因此当页面加载选项2时已经被选中。您现在可以验证所选项目中的更改是否会正确地考虑该预先选择的选项。

作为最后一点，我真的建议如果你真的无法理解这里发生的所有事情，你会尝试让你的页面使用常规的多选元素（使用'ctrl'键选择多个元素）在一次）并且一旦你拥有它按照你想要的那样工作，添加这个所需的功能。祝好运！：）

Answer 2

使用select元素的用户界面行为进行混乱可能不是最好的调用。我建议采用不同的方法：使用复选框+标签元素列表。您可以轻松地根据需要调整ui（如果需要，隐藏复选框，更改背景颜色等等。）。

Js库/插件存在满足这种需求，例如http://loudev.com/

结帐

如何创建将在点击提交</select>的多选<select>元素

2 个答案: