Transfer selected item from select to div and back - javascript

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

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 :
http://eloquentjavascript.net/
https://jquery.com/
https://developer.mozilla.org/en/docs/Web/JavaScript
https://stackoverflow.com/tags/javascript/info
Regards,

Related

How to make my list effects work when I'll change list into table?

I have list of files - and after clicking on one of them it shows the jquery form: here it is: http://jsfiddle.net/GSC3x/11/
But now I noticed, that I will need a table on this page, and I want to this list be one column in my whole table, here is the (ugly) example: http://jsfiddle.net/GSC3x/15/ .
I want the jquery form thing work the same way after changing into the table view. I mean, hide everything and make form appear.
How to do it?
Thanks!
To make the table disappear, you shouldn't hide the individual cells (as you do with $(".show_hide").hide();), but hide the whole table instead.
Also, you are reusing the button that is showing the form for hiding it, but with a completely different styling. That is weird, unnecessary and makes it difficult to use.
Use a separate button to close the form, and don't use the same event handler ($('.show_hide').click). The show and hide parts share no code anyway.
Structuring your code like this also makes it very easy to add smooth transitions like fading or, the sliding you already had implemented.

Is there a way to keep multiple select boxes open at the same time?

I have 2 Select Box in my HTML page.
For some reason, I wish to want both the text boxes open at the same time.
This may be for several purposes, like taking screenshots of the both open at the same time.
The problem I face is, when I click on one selectbox, another goes away, when I click on the other, previous goes away.
Is it possible to keep both the selectboxes open at the same time?
I am fine if it requires javascript to do so.
Here are the two boxes, which I wish to keep open, is it possible to block some events or anything?
Thanks
#xiankai: Yes I have considered using a list view already, and then later instructing that this would/could be a combo-box. Here's my work with this modification.
If your select box doesn't have many elements, have you considering using a listbox view instead? Simply add multiple to the your <select> element. Additionally, you can specify the height of the select box with the size attribute.

Javascript displays more text boxes depending on a pull down option?

I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.

leave the <select> object expanded after selection

I am not sure if it is possible but I would like to leave the HTML <select> object expended using JavaScript, JQuery after the selection. Any ideas?
EDIT
What I want is that; if user selects more option from select list, I will append some more options to select element and leave it open. If user selects something other than more option, I will collapse the list. I can get a hold of other functionality but only problem here is to keep the select element open.
It's not possible directly. You'd have to implement something that looked and worked like a native <select> but which also had the feature you want.
edit — check Mr. Kling's answer; there might be a way to make that work, sort-of.
You could come very close with this:
$('#selectID').change(function(){
$(this).attr('size', $(this).children().length);
});
The size attribute specifies how many options to display (default is 0).
DEMO
You might have to make some tests whether this works in every (recent) browser. But imo this would be better than trying to simulate a select box (screen readers, etc).
You can not expand the select element with JavaScript. You can use select multiple, but that is probably not what you want.

How can I highlight certain options in a HTML select - using javascript

I saw this post:
How can I highlight certain options in a HTML select using jQuery
which is similar to what I need to do, except a bit too complicated for my understanding. In the html body, I have a dynamically changing select form. The user can select multiple items from this form, and click a button ("Display") to run a javascript function. This function already goes through the list to determine which ones have been selected and uses the information somewhere else.
I would like it so that when the user clicks "Display", the items that were selected will be highlighted (and each with a specific color).
What do you think?
Yes! I figured it out.
myList.options[i].style.backgroundColor='yellow';

Categories