Toggle the display of options in a Select - javascript

I am creating a web page which will have a Select element with a number of Options. Each option represents two values: a code and a human-readable string. I would like to allow the user to toggle a setting (on the same page) which would dynamically toggle the select so that just the code or the human-readable string is visible.
I have thought of a couple of ways of doing this:
When the toggle is pressed, I re-create the page and the appropriate Options are loaded into the Select. This has the disadvantage of clearing all of the other fields on the page.
Having 2 Selects where 1 is always hidden. One Select has options with codes. The other Select has options with human-readable strings. The toggle would hide / show the appropriate Select. This has the disadvantage in that I have to manually keep the 2 Selects in sync.
Also note there will be a number of Selects that need to be toggled on any one page.
Any help greatly appreciated.
Thanks,
Phil

you can use option title to hold second string and swap it on toggle with option.innerHTML
<option title="human-readable string">short</option>
swap to
<option title="short">human-readable string</option>

I say it depends on the datasize your selects will be holding. If it's a big chunk you are better served with a kind of your first idea.
Are your selects dynamically growing (like user adding options and so on)? If yes i would go the AJAXian way and do kind of the second idea.

Related

Transfer selected item from select to div and back

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,

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.

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.

Multiple/addable drop down lists in asp.net mvc

Is it possible to have multiple drop down lists in asp.net mvc?
What I'm trying to do is have a drop down list, say with many colours, Red, Green, Blue, Black etc. Then next to it a text box which the user can enter a number.
However there should be then a small + little sign next to it so that another drop down list appears underneath it allowing the user to select another colour. The number of times they can add drop down boxes should ideally be unlimited. Is this possible? I know I can put hidden drop down lists underneath them then enable/show them when the user clicks the + button, but this will only mean a limited number of drop down lists!
Thanks
This has nothing to do with ASP.net mvc. It is a pure JavaScript. Use jQuery to add ddl dynamically.
Sure, you can add as many pull-down menus to your page as you like (and it sounds like you are comfortable with the scripting to do so). Just make sure to add a unique name to each of those menus so you can access the values in your controller.
you can add an ajax action link that will update a div with a drop down list and the same div. So you can add as many dropdown list you want.

how do I disable options based on the previous selection?

I have three drop-down menus for each sample shirt; product, colour and grade. Not all products are available in all colours and/or grades. I would like to disable the options that are not available based on the users selection.
I've tried using this answer here (using a radio select). Unfortunately, I can't get it to work with an option-selected input.
This is what I'm working on - quartus.ca/select-options.html
Any guidance would be appreciated.
You need to dynamically clear and re-insert the OPTIONs on every change, based on your own business logic. You cannot simply disable arbitrary items in a <SELECT> .

Categories