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.
Related
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.
So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});
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/
I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")
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>