We Keep Coding

Focus option without select the value in the option list

I have a requirement which is based on open a "Select" with a lot of options but it should start the selection in the half of the list without select that value in which the component was started
<select>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
When the user opens the list it should start in the middle without select that option, see how the middle option is just focused but not selected:
It's there any way to achieve this using jQuery?

Disclaimer: Styling <select> is tricky business. Tested in Chrome, FF, Edge, Windows10
document.querySelectorAll("select[size]").forEach(EL => {
const h = EL.scrollHeight / EL.options.length; // option height
const i = Math.floor(EL.options.length / 2); // Index of the half-way option
const s = Math.floor(EL.size / 2); // Get the size (also half-way)
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
EL.scroll(0, h * (i - s));
});
select option.highlight {
background: #0bf;
color: #fff;
}
<select size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<option value="7">value 7</option>
<option value="8">value 8</option>
<option value="9">value 9</option>
<option value="10">value 10</option>
</select>
NOTE: The CSS-.highlight option might be a really bad UI and lead to people thinking that that option is actually selected while it's clearly not.
Avoid doing stuff that users are not used to see in the web world.
Therefore: instead of doing
EL.options[i].classList.add("highlight"); // (PS: this is bad UX)
rather do:
EL.options[i].selected = true;

Selectize - select 2nd option on load

On load, how to select second option using selectize plugin?
https://github.com/selectize/selectize.js
As per below example, it have to select 21-Nov-2017.
I can able to select option using value.. but, this value will be dynamic and will change daily.
Thanks
HTML:
<select>
<option value="20-Nov-2017">20-Nov-2017</option>
<option value="21-Nov-2017">21-Nov-2017</option>
<option value="22-Nov-2017">22-Nov-2017</option>
</select>

You can select the second value on the basis of index like this
$('#selectBox :nth-child(2)').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select>

In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')

select onclick event jquery

I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.
Here's my code:
$(document).ready(function(){
$('select').click(function(){
var id = this.id;
var text = $('#'+id+' :selected').text();
alert(text);
});
});
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
I gave the static id for testing purpose, but in real I want to take out the id from select box.
My question is, how can I get the exact value output(HTML) of options on click.

$(document).ready(function(){
alert($('#combo').val());
alert($('#combo option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.

Here is the common and easy approach:
$("#combo").change(function(){
var selectedvalue = $( "#combo option:selected" ).text();
});

Transforming onclick into onchange

for last few days I've been creating contact form for my website which might be professional and contain display:none/block and disabled:true/false areas. And I made it. But an hour ago I was informed that Chrome doesn't support "onclick" function so now I must change this all "onlick" stuff into "onchange".. but it doesn't seem clearly (still not working)...
ONCLICK works fine:
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
</script>
<select class="list" id="topic">
<option onclick="javascript:disableField()" selected="selected">Select Your topic</option>
<option onclick="javascript:enableField()">Topic 1</option>
<option onclick="javascript:enableField()">Topic 2</option>
<option onclick="javascript:disableField()">Topic 3</option>
<option onclick="javascript:disableField()">Topic 4</option>
</select>
ONCHANGE does NOT:
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
</script>
<select class="list" id="topic" onchange="javascript:this.value()">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
I just wanted to be "value" inserted as "X" in "javascript:X()" so this functions can work in way as it happened in "ONLICK" option.
I've been trying maaaany different ways but none of this works.
Please help.
Regards,
Mike

One way to do it
<select class="list" id="topic" onchange="window[this.value]()">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
But i would do it like this
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
function handle(value){
if (value === 'enableField'){
enableField();
} else {
disableField();
}
}
</script>
<select class="list" id="topic" onchange="handle(this.value)">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
Note: for event attributes like onclick, onchange etc, you do not have to say javascript:... it is implied..

this.value()
is a string; you can't call a string. What you want is to find the function in the global scope:
window[this.value]()
Also, it's better to store the functions in a dedicated object:
funcs = {
disableField: function(){...},
enableField: function(){...},
}
...
funcs[this.value]()

Click on option event

how do I handle events for option elements?
<select>
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
When an option element is clicked I want to display a little description for the element. Any ideas how to do that?

You're going to want to use jQuery's change event. I am displaying the text of your option as an alert, but you can display whatever you want based on your needs. (You can also, obviously, put it inside another part of the page...it doesn't need to be an alert.)
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
Also, note, that I added an ID to your select tag so that you can more easily handle events to it (I called it myOptions).
Example: http://jsfiddle.net/S9WQv/

As specified by JasCav using jQuery you can accomplish the same in javascript using
<select onchange="alert(this.options[this.selectedIndex].text);">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
Alternatively, onclick event of option, but note that it is not compatible on all browsers.
<select>
<option value='option1' onclick="alert(this.value);" >Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>

You can write it as below mention using javascript.
document.getElementById("select").addEventListener('change', (event) => {
console.log(event.target.value)
});
<select id="select">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>