从下拉列表中选择选项

Question

我正在为一个新的美食博客构建一个食谱查找器。 我的设计基本上涉及用户选择成分，一次一个，从下拉<select> ，选项从列表中消失（所以他们不能 select 再次出现）并出现在另一个 HTML 列表中，并带有指向将其从列表中删除。 完成后，他们单击一个按钮，然后进入结果页面。

这是由 PHP 生成的 select 标记：

<select>
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

它不是非常复杂，但它确实提出了一些关于我将如何做这些事情的问题。 我正在使用 jquery。

1. 我需要将所选项目存储在 memory 中，这样我就知道在他们完成选择项目后要发送到搜索页面的内容。 在您看来，最好的方法是什么，因为每个项目都有两个值（它的“真实”值和它的数据库值）？

2. 在他们选择了某些东西（最好不触发 onchange 事件）之后，如何使“请选择”选定的选项？

3. 一旦我将它存储在 memory 并将其添加到他们正在搜索的显示列表中，我如何从可用项目中删除该项目？ 我可以（安全地）“隐藏”或禁用它吗？

4. 如果在#3 中我必须从 DOM 中删除它，当我再次添加它时，我可以对列表进行排序（基于任一值）并将 please-select 选项保留在顶部吗？

Answer 1

1.) 您可以将 append 隐藏表单元素到页面，其值为所选选项的值。

2.) jQuery("#select-list")[0].options[0].selected = true // assuming it's the first item

3.) 我会使用 jQuery("#select-list option:selected").remove() 从 DOM 中删除元素

4.) 你可以使用 before()。 jQuery(your_default_option).before("#select-list option:first");

Answer 2

1）基本思路，你需要检查以确保第一个没有被选中

var selections = [];
var mySel = document.getElementById("mySelectId");
var ind = mySel.selectedIndex;
selections.push( mySel.options[ind].value ); //add to a list for you to remember
mySel.options[ind] = null; //remove

2) mySel.selectedIndex = 0;

3) 见#1

4）是的，您可以使用 insertBefore 将其添加到您想要的任何位置

此处示例： http://www.pascarello.com/lessons/forms/moveSelectOptions.html

Answer 3

1. 您可以将“两个值”作为 JSON 表示法的 object 存储在隐藏表单字段中。 当用户与页面交互时，这将使 jQuery 中的修改变得容易。

2. 您将需要结合使用 onchange、keyup 和 keydown 事件来捕获对表单的可能更改，以便您可以重新选择“请选择”选项。

3. 您需要从 dom 中删除该选项并稍后重新添加。 您可以通过 jquery 通过以下方式轻松完成此操作：

   $("选择选项：选择").remove();

4. 您可以为从索引 1 开始的选项编写排序 function，并将“请选择”保留为第一个选项。

Answer 4

将把这个答案留在这里，但我认为我没有阅读你的整篇文章，所以它可能没有多大帮助。

你需要给你的 select 一个这样的 id：

<select id="MySelect">        
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

得到它就是这样的：

<?php
    $value = $_REQUEST["MySelect"];
    echo $value;
?>

代码未经测试，并且 $_REQUEST 可以替换为 $_GET 或 $_POST 关于您在表单上指定为操作的内容。 $_REQUEST 会吃掉它。