Drop-in replacement for "select" element? - javascript

I need to control a <select> element (open it, navigate through its options, select value etc) using javascript.
As this is impossible(JS cannot open a <select> element) I wonder: Is there a drop-in replacement that looks the same(keeps the native UA styling of a real select element) and works the same(i.e. in forms, keyboard navigation (up/down) ), except it can be controlled more by JS ?
More background:
I have an ElectronJS based application and until now I used native OS keyboard events to control the <select> element but since the latest update of the OS( Mac Mojave) native keyboard events are no longer allowed so I have to use JS only. The app is quite big so I'm trying to minimise the amount of work to replace native <select> menu with a custom one.

If you want to set the value of a select input, then you can do that using vanilla javascript.
Given a select element like this:
<select id="my-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
You can use the following javascript to change the value:
document.getElementById('my-select').value = 'saab'
<select id="test-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<button onClick="document.getElementById('test-select').value = 'fiat'">Click me</Button>

you can use select2 library
https://select2.org/
with search

Related

Accessible Select List Read all Options

HTML5: I have a multi-select list that I need to make accessible. Since it's a native control, it works fine. The problem is that they want the assistive technology to read all of the options when the page is loaded. So far, I have not found a way to make it read them. If they select an option, it will read the text and say option "xx" out of "xx", but it is not enough. Has anyone found a way to make assistive technology read the options upon loading the page? This customer is mainly using JAWS to help navigate the pages.
Here is the test html that I've been playing around with so far.
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
As long as you use a native control, you should not reprogram its normal behaviour. That's common accessibility.
You could perfectly add a label or an aria-label listing all the choices:
<label for="testing">
Choose one or more elements in the list: One two three four
</label>
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

how to add textbox in dropdown select option

i am trying to add textbox in dropdown but textbox is not visible in dropdown below is the picture of desired output
$.each(SegGoalData, function(i, v) {
$("#Select").append("<option value=" + SegGoalData[i][0] + ">" + SegGoalData[i][1] + "</option>"); // i am adding value to dropdown
$("#Select").append("<option><input type='text' name='fname'></option>"); // i am trying to append to textbox
})
<select id="Select">
<option selected="selected" disabled="disabled">Look here for more goals</option>
</select>
You can use select2 JS
Select2 is a fully-featured, rich select replacement / enhancement plugin. It not only restyles your select elements but also extends them with additional functionality.
$(document).ready(function() {
$(".custom-select2").select2();
});
.custom-select2{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="custom-select2">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</select>
Much like other advanced select plugins, it packs in a whole heap of customizable feature such as:
Single select element / element with optgroups
Multi-select element
Sortable / filterable search field for select elements
Ability to load data from a remote data source (e.g from an API to dynamically change options)
Tagging support (selecting from a predefined list / adding dynamic tags on the fly)
That is not possible, because browser native UI does not support that functionality, therefore you will have to do a custom UI, or use a library which is already done this for you. as Mention above. https://select2.github.io/ is your best option, there may be other libraries that can do this.
They will replace your <select>...</select> tag with their own HTML.
You will have to be very careful, with this if you are loading using ajax, you will have to re-instantiate it each time, if you choose to load it using ajax.
You can't for now. Just use a dedicated searchable dropdown plugin (Choosen, Select2, etc...), or make your own :)
However, Mozilla is already working on this feature :
Bug 1309935 - Add ability to find within select dropdown when over 40 elements (view specs)

How to close dropdown on onchange event of selector In iOS6?

I am working on hybrid application with worklight.
When tapping on select control, a native dropdown pops out. Now I have bound onchange event on this select so when I choose any option the event gets fired but the dropdown doesn't fadeout until I tap on the done button.
I have used ('select').blur() to overcome and it is working fine for Android but not for iOS6.
I want to fadeout the dropdown with onchange.
Code:
<select id="myID" onchange="myFun()">;
function myFun(){
$('select').blur();
}
or
function myFun(){
$('#myID').blur();
}
What are the possible soultions for it? Thanks.
It seems that in iOS you cannot use .blur() on a select element, the event will be ignored.
Note: in iOS the user is expected to tap the Done button. Why confuse your end-user by introducing unexpected interaction and behavior (= not provided by the OS to begin with). For example, what if the user selected by mistake? Instead of being able to correct on the spot, s/he will be forced to tap again and select again... I recommend leaving it with the default behavior.
Updated example: instead of removing the select from the DOM and re-introducing it, I've found this.
The below works only in iOS6, though, per the question. It doesn't work in iOS7.
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Selected option: <input type="text" id="selectedOption"/>
JavaScript
function wlCommonInit(){
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
var mySelectedIndex = $("#mySelect option:selected").index();
$("#selectedOption").val($("#mySelect option:selected").text());
if($("#mySelect").is("select")){
var fakeSelect = $("#mySelect").clone();
$("#mySelect").replaceWith(fakeSelect);
$("#mySelect").bind('change', changeValue);
$("#mySelect").prop('selectedIndex', mySelectedIndex);
}
}
While my previous answer will work, only in iOS6, the following works for me in both iOS6 and iOS7 using the iOS7-Select-Element-Auto-Close plug-in by lukewhyte.
Simply place the JS code provided in the plug-in in your project and include it in your index.html,
<script src="js/select.js"></script>
Then:
HTML
<div id="mySelectDiv">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
JavaScript
function wlCommonInit(){
$('#mySelect').iOSSelect();
$("#mySelect").bind('change', changeValue);
}
function changeValue() {
$("#selectedOption").val($("#mySelect option:selected").text());
}

android spinner in html/javascript

I know this isn't a proper question but I found nothing useful by googling.
I want a android spinner in my html page; I mean a value set by drop down list. I searched for spinner in javaScript but that wasn't what I want.
Can you guys tell me what calls android spinner like element in html or give me link/tutorial?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

How to select a particular value from a <select> element?

I have come across <select> (drop down list) in HTML in the learning process. I learnt how to code a <select> drop down list.
How can I perform a particular action (in my case I am performing a mathematical operation) when a value in the <select> is chosen?
You can do this a couple of ways.
I would suggest putting a onchange event attribute and give the element an ID.
eg.
<select id ="example1" onchange="example_function()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Now that you have done that you can goto your JS and use the follow.
var droplist
var droplist_value
function example_function(){
droplist = document.getElementbyID("example1")
droplist_value = droplist.value
}
You can now use the droplist_value as you want.

Categories

Resources