将所选项目从选择转移到div并返回

时间:2015-07-03 14:55:14

标签: javascript jquery html

我正在努力实现某些目标,但我不知道它是否可行。 在页面上,我有一个包含许多选项的选择框。在同一页面上还有一个div部分。 我希望能够选择一个或多个选项,按一个按钮,使所选项目从选择框中消失,并显示在div内。所有这些都是按顺序排列的。

现在,我已经让这部分代码工作了(不得不承认我“借用”了几个地方的代码......)

code:

JSFiddle

我想要实现的第二部分是能够选择div中的元素,单击另一个按钮,并从div中删除元素并重新出现在选择框中。再次排序。

我认为在从selectbox转换为div(可能是li?)时我必须更改元素的类型,以便可以选择它们,并在返回途中将类型转换为{{1}再次,但我不知道如何....

现在当我选择一个选项并将其带到div时会发生什么,div中的文本也有<option>形式,因为它已被完全复制。

我希望我在这里有意义,我希望有人可以指出我正确的方向。如果我以完全错误的方式解决这个问题,请告诉我。 顺便说一句,如果我使用两个选择框,那很容易,但我不能。它必须是一个选择框和一个div ......

谢谢,汉斯

1 个答案:

答案 0 :(得分:0)

正如我们在主要评论中所说,以下是您遇到的一些问题:

如何在jQuery中选择元素

我知道您知道,但在您的示例中,您希望将元素从div移动到另一个,您需要{}到put each value in a div(然后您就可以选择每个元素)。< / p>

如何选择div

您的第二个问题是您希望能够在右侧框中选择div以将其复制回选择中:

$("body").on("click", ".rightElements", function(key, element){
    $(element).addClass("selected");
})

然后你可以这样做:

$(".rightToLeftButton").click(function(){
    // Your $(".selected") divs value go to the select
});

这段代码提供了新的问题:

  

如何在点击其他div时取消选中?

     

如何选择多个div?

等。等

(我确信你会练习,测试和逻辑!)

如果你达到了这些要点,你可以解决所有其他问题,当你遇到问题时,你无法解释一个独特的短语(谁可能很长:)),问你是否有几个问题,将它们分开并寻找答案!

看起来很粗鲁,但你应该看看:

此致