-2

I'm trying to achieve something, but I don't know if it is even possible. On a page I have a selectbox with a number of options. There's also a div section on the same page. I would like to be able to select one or more options, press a button and make the selected items disappear from the selectbox, and appear inside the div. And all this sorted as well.

Now, I have got this part of the code working (have to admit that I "borrowed" the code from several places...)

code:

JSFiddle

The second part I'd like to achieve is to be able to select the elements in the div, click another button, and have the elements removed from the div and re-appear in the selectbox. Sorted again.

I think I have to change the type of the element when transferring from selectbox to div (maybe into an li ?), in order for them to be selectable, and on the way back, convert the type to <option> again, but I don't know how....

What happens now when I select an option and bring it to the div, the text in the div also has the form '<option>'...'</option>' , because it has been exactly copied.

I'm hoping I'm making sense here, and I hope there is someone who can point me in the right direction. If I'm going about this in the completely wrong way, please tell me. By the way, it's easy if I was using two selectboxes, but I can't. It has to be one selectbox and one div......

Thanks, Hans

notaverygoodprogrammer
  • 349
  • 5
  • 17
  • I understand your problem, but it's not an issue, it's several issues. You should consider and think about each problem you have. After that Stackoverflow has already (for sure) each answer ;) I you want to be helped on giving a name to each of your problems, ask me, i'll enjoy to help you – Sacreyoule Jul 03 '15 at 15:19
  • Hi, Sacreyoule, thanks for answering. Yes, I would like to know what sub-issues you see. Was under the impression it was just a matter of changing element types. So if you're willing to point this out to me, please ! I will be more than happy to find the solution for every problem defined. how else am I going to learn to be better at JS coding....... – notaverygoodprogrammer Jul 03 '15 at 16:56
  • You should delete the 'Hi Sacreyoule' post (go hover it and click on the cross ;) ) I'll delete mine after – Sacreyoule Jul 03 '15 at 18:22

1 Answers1

0

As we said in main post comments, here are some issues you have :

How to select elements in jQuery

I know that you know, but in your example you want to move elements from a div to another, you'll need for that to put each value in a div (then you'll be able to select each one).

How to make div selected

Your second issue is that you want to be able to select divs in the right box to copy them back in the select :

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

Then you can do :

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

This piece of code provides new issues :

How can I unselect selected on clicking other divs ?

How can I select multiple divs ?

Etc. etc.

(I'm sure with practice, tests, and logic you'll do it!)

If you achieves these points, you can achieve all others of your problems, when you have a problem you can't explain with an unique phrase (who can be long :)), ask you if there are not several issues, separate them and look for answers !

It seems rude but you should take a look at :

Regards,

Community
  • 1
  • 1
Sacreyoule
  • 180
  • 9