Select / deselect dropdown option with JS on iOS 6.x (iPad) - javascript

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.

Related

How to get the label to populate in Chosen dropdown?

Ok. So, after 2 hours of searching and debugging, I found out that chosen.js plugin won't populate the dropdown with the label/values from the original dropdown.
My original dropdown:
<select id="mySelectId">
<option label="test" value="test"></option>
</select>
If my dropdown is modified like this, it works fine:
<select id="mySelectId">
<option value="test">test</option>
</select>
How do I let chosen to see the labels instead?
Well I learned something new today. I never knew about the label attribute of <option>. However after reading about it here and here, I would suggest not using it.
It's not supported on a major browser (Firefox).
The same effect is achieved by placing the label between the opening and closing option tags<option>label</option> as you outlined above.
Modify your <option> tags accordingly, and then you will be able to get chosen.js to work properly.

How to show a long string in selected item when a page loads in mobile browser

I'm working in a web page for mobile browsers. I have a select list that will show an option selected, the problem is that when the selected option has a long string, by default, is truncated, I'd like to show the full text because these are questions that the user should answer. I've been trying with css incrementing the height of the select element but the text is always truncated, and I can't find on Internet any answer for it I could find only to increment the items length but not the selected option. Thank you in advance for your help.
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Very long string to show by default</option>
<option value="value3">Value 3</option>
</select>
This basically answers your question: Line Break in HTML Select Option?. You cannot add a line-break in between a long <option since browsers don't provide this formatting option therefore the selected option will get truncated beyond the size of your mobile device.
Although here's a quick workaround that I've coded for you: jsFiddle. I've wrapped the <select> dropdown inside a <div> and given that <div> a width of 300px along with the overflow-x: scroll property. The selected option won't get truncated now and the user will be able to scroll left/right horizontally to read the complete text of the selected option.

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 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