We Keep Coding

How to add a button that scrolls up and down through a multiselect list?

Similar to this question, How can I move selected option in multiselect up and down by buttons using jquery? but not moving the selection up and down. But being able to scroll up and down a list without the scrollbar for more accurate scrolling. Similar to using the up and down keys to progress through the list one at a time up or down.
How can I achieve this with an up and down button with jQuery or JavaScript?
Or are there any HTML attributes that may aid in browsing a long list more user friendly?
<select id="selectLongList" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Two buttons, maybe to the side
<button id="up">Up</button>
<button id="down">Down</button>
Update
After further looking I came across this solution, Choose option from select list using next/previous button with jquery. This kind of replicates what I am trying to accomplish. But I'm not wanting to move the selection. I would just like to move through the list of options.
Borrowing from one of the answers. https://stackoverflow.com/a/9112759/2946802
>
$("#next, #prev").click(function() {
$("#mycars :selected")[this.id]().prop("selected", true);
});
Sort of like this in how it changes to the next value, but working with a multiple select and not changing the actual selection. Just moving on to the next value.
$("#prev").click(function() {
$('#selectLongList option:selected').prev().prop('selected', true);
});
$("#next").click(function() {
$('#selectLongList option:selected').next().prop('selected', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="prev">Previous</button>
<select id="selectLongList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
<button type="button" id="next">Next</button>

Check out Select2 for jQuery, it will most likely solve your problem.
You won't need to move any options. Select2 will just display every selected item inside the select itself.
Select2 Docs Getting Started

Programmatically keypress on a focused drop-down element without Jquery

I'm trying to press enter (programmatically) on a drop down element. I CANNOT USE JQUERY.
The drop down is already in focus, I just want to click enter to open it.
Any ideas how it can be achieved?
Here's my HTML:
<select class="test">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>
And the JS that got the element focused:
document.getElementsByClassName('test')[0].focus();

var element = document.getElementsByClassName('test');
element.onclick.apply(element);

Select Tag in HTML causing Issue in IE

We have a drop down field in survey page , it contains different value as shown in screenshot, the code is working fine Chrome but in IE i am getting an unwanted space problem in the drop down , i have tried different methods to fix this issue..
HTML CODE
<select class="q_select">
<option value="" class="null"></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N"class="hide">N</option>
</select>
Kindly help me , Please find the attached screenshot for chrome and IE
Chrome
-------------------------------IE shown below----------------
I am setting a default value also in the select <option value="" class="null"></option>

cannot bind event to multiple <select>'s, only first child

So I have multiple selects like:
<select class="new_select" >
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="new_select" >
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
which are dynamically appended, so I have to use the .on event handler.
For some reason, the following is only fired when the first select is changed. How would I go about getting it to fire for changes to all select elements?
$('.new_select').on('change', function() {
alert('clicked');
alert(this.value);
});
I am open to workarounds too, looking into this, it seems there is some whisper of browsers not supporting multiple selects, so i'm not sure if that is the root of the problem. Sincere thanks for any help, it is greatly appreciated.

Use event delegation as follow:
$(document).on('change','.new_select', function() {
alert('clicked');
alert(this.value);
});

You have to use event delegation, so each element added dynamically can fire the function.
$(document).on('change', '.new_select', function() {
alert('clicked');
alert(this.value);
});
For best performance, ensure to choose the parent element on which you bind your event to make it as narrow as possible instead of document.

select onchange firing twice in ie7

this is really wierd, not sure why this is happening but my onchange is firing twice. any help/ideas is greatly appreciated...
<select id="ddlGender" onchange="myfunc()">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>

Your java script code should be in java script file loaded in your head:
$(document).ready(function(){
$("#ddlGender").unbind('click').change(myfunc);
var myfunc = function (e)
{
// Do something important....
}
});
If I remember correctly you need to unbind click event from select in IE in order to avoid firing event twice.
And your html should not have onchange any more:
<select id="ddlGender">
<option value="1">-select-</option>
<option value="2">Male</option>
<option value="3">Female</option>
<option value="4">NotSpecified</option>
</select>