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>
Related
the Shopify collection buy button creates products that have pull-down menus for choosing options like color. when you change a color, the product image changes.
example collection page
i want to trigger those product image changes with javascript. relevant html looks like this:
<div class="shopify-buy__option-select-wrapper" data-element="option.wrapper">
<select id="Option-999-0" class="shopify-buy__option-select__select" name="Color" data-element="option.select">
<option selected="" value="Silver">Silver</option>
<option value="Gold">Gold</option>
<option value="Rainbow">Rainbow</option>
<option value="Blue">Blue</option>
</select>
</div>
some things i have tried:
// get the <select> element (this part works)
let selectElement = document.getElementById('Option-999-0')
//select a new value
selectElement.value = 'Blue'
let changeEvent = new Event('change');
selectElement.dispatchEvent(changeEvent)
I've also tried click() -ing on various things like:
selectElement.options[3].click()
but the javascript from shopify never seems to "hear" my actions unless i literally click my mouse on the select menu. thats the only way i can get the image to change. what am i doing wrong?
this is the javascript from shopify: https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js ...i searched it for "isTrusted" and no results fwiw.
i have tried creating the buy button with and without the iframe. i seem to be able to select the elements just fine either way (using contentDocument property of iframe), but my javascript never triggers the image change response from the shopify code, and i cant figure out what action shopify is actually listening for?
what i am trying to achieve is to replace the pulldowns with regular text in little boxes that you can click on to change the image. if this can be done through the shopify buy button options that would be fine also.
any clues appreciated!
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 creating dynamic drodown using html <select> tag with attribute multiple and first option selected by default:
<select multiple="multiple" size="1">
<option value="" selected="selected">All</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
User taps option One for instance and then supposed behaviour is to deselect the All option and select the One option.
When iPad browser open native UI for dropdown I am able to catch touch events from dropdown control (code snippets from my plugin):
this.$el.on('change', this.selectOption, this);
and manipulate options to deselect them in the way below:
selectOption: function(e){
var opts = element.find('option');
opts.each(function(idx, opt){
$(opt).prop('selected', false);
});
}
The problem
Option properties are set to false properly BUT visually in iPad's dropdown UI selected options remain unchanged - which may confuse user.
The changes in UI are applied after Done button in dropdown is tapped. Next opening shows all options deselected which is OK but little bit late ;-).
The question
Is this possible to select/deselect options in the way where user taps one option and the other one is being deseleted realtime in native iPad dropdown?
When we trigger a <select> in IOS it will use it's own internal browser control, beyond our ability to style.
It respects the multiple="true" attribute and acts accordingly.
The question is the equiv to asking : "how can I make my browsers toolbar blue when I click on my webpage button"
It is not clear from the question why
You set mutliple="true"
Then set the size=1
Then try to make it behave like a single select with javascript,
only allowing one select.
I suspect that all you actually need is to remove the multiple = "true" attribute and maybe increase the size ( if you want all options visible )
<select size="3">
<option value="" selected="selected">All</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Then the native iOS controls can behave as you want.
For all other solutions , look into ditching the select ( or hiding it ) and create a custom javascript control made from <ul><li>'s ,or similar, to populate the values behind the scenes.
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.
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'));
});