Question

我正在为一个新的美食博客建立一个食谱发现者。我的设计基本上涉及用户从下拉列表<select>一次一个地选择成分，该选项从列表中消失（因此他们无法再次选择）并出现在另一个HTML列表中链接将其从列表中删除。完成后，他们会点击一个按钮，然后将其带到结果页面。

这是PHP生成的选择标记：

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

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

我需要将所选项目存储在内存中，以便我知道在选择项目后要将哪些内容发送到搜索页面。在您看来，最好的方法是什么，因为每个项目都有两个值（“真实”值和数据库值）？
如何在选择的内容后选择“请选择”所选选项（最好不要触发onchange事件）？
一旦我将其存储在内存中并将其添加到所显示的搜索列表中，如何从可用项目中删除该项目？我可以“隐藏”或禁用它（安全地）吗？
如果在＃3中我必须从DOM中删除它，当我再次添加它时，我可以对列表进行排序（基于任一值）并将请选择选项保留在顶部吗？

Answer 1

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

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

3.。）我将使用jQuery从“DOM”中删除元素（“＃select-list option：selected”）。remove（）

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

您可以将隐藏表单字段中的“两个值”存储为JSON表示法中的对象。当用户与页面交互时，这将使jQuery中的修改变得容易。
您需要结合使用onchange，keyup和keydown事件来捕获对表单的可能更改，以便您可以重新选择“请选择”选项。
您需要从dom中删除该选项并稍后重新添加。您可以通过jquery轻松完成此操作：

$（“select option：selected”）。remove（）;
您可以为以索引1开头的选项编写排序函数，并将“请选择”作为第一个选项。

Answer 4

我会在这里留下这个答案，但我认为我没有阅读你的整篇文章，所以它可能没什么用。

您需要选择一个这样的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;
?>

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

从下拉列表中选择选项

4 个答案: