javascript - 从下拉列表中选择选项

Question

我正在为一个新的美食博客构建一个食谱查找器。我的设计基本上涉及用户从下拉菜单中一次选择一种成分<select> ，该选项将从列表中消失(因此他们无法再次选择它)并出现在另一个 HTML 列表中，并带有一个用于将其从列表中删除的链接。完成后，他们单击一个按钮，然后进入结果页面。

这是 PHP 生成的选择标记:

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

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

1. 我需要将所选项目存储在内存中，以便我知道在完成选择项目后将哪些内容发送到搜索页面。您认为最好的方法是什么，因为每个项目都有两个值(其“真实”值和数据库值)？

2. 如何在他们选择某些内容后“请选择”所选选项(最好不要触发 onchange 事件)？

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

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

Answer 1

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

2.) jQuery("#select-list")[0].options[0].selected = true//假设它是第一项

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

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