Switch dropdown menu to button upon selecting an option? Within webpage - javascript

I would like to have a feature on my site that allows me to have a select drop-down and upon selecting an option, it will lock that option into place by replacing the select with a button that holds onto that text.
I am using KnockoutJS, with jQuery.
I suppose I could always just use KnockoutJS's HTML data-bind and just manipulate the select/button in the background using JavaScript but with all the fancy things Knockout can do, thought maybe there was a better option.

I would use the Knockout's visible binding. In this example the select and button are toggled based on the value's length, but you could also use a second property to toggle visibility in case you might need to show the select again at some point.
HTML
<select data-bind="value: test, visible: !test().length">
<option></option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button data-bind="text: test, visible: test().length"></button>
JavaScript
var ViewModel = {
test: ko.observable('')
};
ko.applyBindings(ViewModel);
Here's a fiddle: http://jsfiddle.net/bQKt6/2/
Here's a fiddle that uses a secondary property to toggle visibility along with a click handler on the button that shows the select again: http://jsfiddle.net/LYhDx/1/

Put a .change handler on the dropdown, then replace it with jquery with a button. Keep the value of the dropdown by using .val
Here's an example for you: http://jsfiddle.net/Rm69F/

Related

Disable re-select when model was selected in Angularjs-chosen

I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.

HTML select tag autocomplete

I got some select tag as follows:
<select id="fruits">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
<option value="4">Grapes</option>
<option value="5">Ginger</option>
</select>
What I want to do is, whenever the user focus on the select, and he's clicking on the key "G" in his keyboard, the option "Grapes" will be automatically selected, and when he presses "G" once again, "Ginger" will be selected and so on.
I have no clue how to do it.
Well, If you want to add Auto Complete functionality to your html select element then there is nothing better than selectize.js
All you need to do is either include its css and js file in your project or you can use cdns.
Go to Selectize website here
I think this is the default action of drop down(select control). You have to do zero effort to achieve it.
try this JSbin.. there is a select box and when user first presses g on the keyboard grapes is selected and on second ginger is selected
http://jsbin.com/UYeZaPA/1/edit
DEMO
What you are asking for is the default functionality of drop-down-list.
if you want to search the drop-down-list you can try this plugin.
jQuery Searchable DropDown Plugin Demo
DEMO - with your code
$('#fruits').searchable();
you can also try DEMO

How to hide the dropdown list in a select box?

I'm working on a little custom dropdown multi-select using JQuery.
What I'm doing is hiding a multiple select box until a seperate select box is clicked - to keep things looking native in the browser it's in.
However, I'm trying to make the multiple select box look kind of like it's part of the normal select box.
So, you click the select box and the multiple appears just below it, appearing to be part of it.
Then, when you make your selections and click the original select box, the multiple box disappears again.
Anyway, this is all working great, except the single option I have inside the standard box keeps appearing on top of the multiple select box.
I've tried using z-index properties to fix this, but to no avail.
Is there a way to hide the dropdown, or essentially disable the dropdown without actually setting the disabled attribute?
You don't have to disable the dropdown, if you're using jQuery you can simply .hide() the multiselect, which basically sets the style='' attribute to display:none;.
$("#your_multiselect").hide(); // .show(); when you want to bring it back.
What I've ended up doing is having no options inside the original select box and having a disabled one in the multi select that says "Select up to 3" so people still see the instructions, but only after the click.
It's not as good, but it'll work.
You can use CSS to hide the option elements in a select box. So you could programmatically hide the options in the first select box while you have the multi-select box up. This will show the currently selected value but hide all options when you click on it.
Here's a short fiddle with the CSS/HTML:
http://jsfiddle.net/LWPL3/
CSS
.hidden {
display: none;
}
HTML
<select>
<option class="hidden">Option 1</option>
<option class="hidden">Option 2</option>
<option class="hidden">Option 3</option>
</select>
From there, you could just $(optionelements).addClass('hidden') to the option elements in the main select box whenever you want to hide them.

How to follow focus (from option to option) within an HTML select element

I'm trying to display extra information to the user as they highlight different options in an open select element.
I'm using the keydown event of the select element and have it working when the keyboard (arrow keys) are used. Basically I track how far and in which direction the user goes from the selected item. With that info, I know which option is highlighted.
My question is: how do I know which option is highlighted if the user just uses the mouse?
This works in FF only: http://jsfiddle.net/umDNF/2/ (code below as well). You might want to think about going with a custom dropdown as opposed to a box. Maybe something like this http://labs.abeautifulsite.net/jquery-selectBox/ where there are tons of hooks to trigger the display of your info.
Html:
<select>
<option data-info="Option one">1</option>
<option data-info="Option two">2</option>
<option data-info="Option three">3</option>
<option data-info="Option four">4</option>
</select>
<div class="metadata">Placeholder</div>
Javscript (using jquery):
$('option').live('mouseenter', function(){
$('.metadata').html( $(this).attr('data-info'));
});

How to automatically expand html select element in javascript

I have a (hidden) html select object in my menu attached to a menu button link, so that clicking the link shows the list so you can pick from it.
When you click the button, it calls some javascript to show the <select>. Clicking away from the <select> hides the list. What I really want is to make the <select> appear fully expanded, as if you had clicked on the "down" arrow, but I can't get this working. I've tried lots of different approaches, but can't make any headway. What I'm doing currently is this:
<li>
<img src="/images/icons/add.png"/>Add favourite
<select id="list" style="display:none; onblur="javascript:cancellist()">
</select>
</li>
// in code
function showlist() {
//using prototype not jQuery
$('list').show(); // shows the select list
$('list').focus(); // sets focus so that when you click away it calles onblur()
}
I've tried calling $('list').click().
I've tried setting onfocus="this.click()"
But in both cases I'm getting
Uncaught TypeError: Object # has no method 'click'
which is peculiar as link text says that it supports the standard functions.
I've tried setting the .size = .length which works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)
Does anyone have any suggestions?
I've come across the same problem, wanted to implement keyboard navigation in my app, but select elements were not expanded, so people using the keyboard were going to lose functionality. I've created ExpandSelect() function which emulates mouse clicks on select elements, it does so by creating another <select> with multiple options visible at once by setting the size attribute, the code is hosted on Google Code website, ExpandSelect.js is only 4 KB, see screenshots and download it here:
http://code.google.com/p/expandselect/
Screenshots
There is a little difference in GUI when emulating click, but it does not really matter, see it for yourself:
When mouse clicking:
(source: googlecode.com)
When emulating click:
(source: googlecode.com)
More screenshots on project's website, link above.
Here a simple solution, AUTO-EXPANDED select menu (all options visible)
<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
<option selected="selected" value="0">defaulttt</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
<script type="text/javascript">
var slctt=document.getElementById("ddlTestSelect");
slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px';
</script>
You have a syntax error. It should be:
$('#list').click();
You forgot the #
Please try this:
function showlist() {
//using prototype not jQuery
$('#list').show(); // shows the select list
$('#list').focus(); // sets focus so that when you click away it calles onblur()
}
The simplest way is to use the "multiple" attribute in HTML
<select multiple></select>
and you could also add a style attribute to set the height of the list
<select multiple style="height:150px;"></select>

Categories