How to get the label to populate in Chosen dropdown? - javascript

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.

Related

drop-down (select) text not refreshing on javascript update

I have a simple drop-down menu...
Select your favorite fruit:
<select name="fruit" id="fruit">
<option value="">--</option>
<option>Apple</option>
<option SELECTED>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
I have tried doing this...
document.getElementById("fruit").value = "";
...which changes the selection to the first option
I have also tried doing this...
document.getElementById("fruit").length=0;
...which deletes all the options.
I have also tried doing this...
document.getElementById("fruit").innerHTML="<option value=''>NEW</option>";
...which replaces the options with a new one.
All of those work as expected when not in my actual code. The problem is when I try and include it in a page inside my WordPress plugin.
What happens is... the value changes and is evident if I click on it after ...but... the display text in the drop-down stays as the original text "Orange" (even if that text doesn't actually exist in the drop-down anymore) until I actually change to a new selection.
I have tried searching for any relevant content that might affect it but I can't see anything. Between WordPress itself, the theme, the plugin, etc., there is just too much code to display here. I am simply hoping someone has seen the issue before and can point me in the right direction and let me know what to look for.
This is due to the fact your id='fruit_1' but you are using fruit which is the name and not the id of the select element.
Use document.getElementById("fruit_1") instead of document.getElementById("fruit"). That should work.

Set selected value for a dropdown in angular

I'm working in an angularjs app, and I having a hard time trying to set the selected value in a select tag.
Notice, the 2nd option has the selected="selected"
I tried all the solutions posted, like set the doc type t html5, add autocomplete=off, add a name to the form tag. And nothing seems to work. Any idea how to achieve that.
This is fiddle: https://jsfiddle.net/20cw7eqe/ and works fine there.
But it does not work on FF or Chrome. BTW, Im using bootstrap.
Any workaround?
Take a look at this example: http://plnkr.co/edit/Xc8Qrcr0AN4I2U0chbye?p=preview
There you can see 2 different examples of select tag, for different models. You can use the one that is more similar to your case.
Just set in your controller the value you want to be selected. ng-model will make the rest.
I have edited the plunker so you can se how ng-selected works. This was the code included:
<select required="true" ng-model="selected3">
<option ng-repeat="option in options2" ng-selected="option == 'second'" >{{option}}</option>
</select>

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

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

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.

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'));
});

Categories