We Keep Coding

Why select() method is not working in Combobox?

I need to do in Combobox exact things that I do with in textbox. When the page loads Combobox first value with like Focus().select()
$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<input type=text id="sel_bookID" value="ddddddddd" name='userid1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Like this when page load

You can set an option as the default using the selected attribute:
<select>
<option>Opt 1</option>
<option selected="true">Opt 2</option>
<option>Opt 3</option>
</select>
However, if you really want to use jQuery to do this you can use .prop method:
$(document).ready(function() {
$('#opt2').prop('selected', true);
});
<select>
<option>Opt 1</option>
<option id="opt2">Opt 2</option>
<option>Opt 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<select id="sel_bookID" name='userid1'>
<option value="ddddddddd">ddddddddd</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Maybe your trying to do like this?
<select id="sel_bookID">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(document).ready(function(){
alert($("#sel_bookID option:selected").text());
});
or maybe you only need autofocus please check this link on select autofocus

jQuery Select box multiple option get value and match values

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,

So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.

Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>

Return the first option of select

If i had the below code,
<select id="my_select">
<option id=1>Option 1</option>
<option id=2>Option 2</option>
<option id=3>Option 3</option>
</select>
How would I return the first option id when the page loads, not when its selected. I've tried such things as onLoadId = $('#my_select option).attr('id') under the jquery on load function, but that's not working.

One solution is to use eq() method, which reduce the set of matched elements to the one at the specified index.
var x=$('#my_select option:eq(0)').attr('id');
console.log(x);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select">
<option id=1>Option 1</option>
<option id=2>Option 2</option>
<option id=3>Option 3</option>
</select>
Another way is to use first() method.
See reference here.
var x=$('#my_select option').first().attr('id');
console.log(x);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select">
<option id=1>Option 1</option>
<option id=2>Option 2</option>
<option id=3>Option 3</option>
</select>

You can use eq selector
$('#my_select option:eq(0)').attr('id');

Numerous ways to create the selector
$('#my_select option:eq(0)')
$('#my_select option').eq(0)
$('#my_select option:first')
$('#my_select option').first()
$('#my_select option:nth-child(1)')
$('#my_select option:first-child')

You can try "option#1"
$("#my_select option#1").attr('id')

Javascript SELECT BOX options dependent on other SELECT BOX option selected

i have a problem. I wanted to do on my web page this thing:
1. i have select box like this
<select name="firstbox" id="#firstbox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
2. i have select box of which options are depending on first box, so if i choose in first box Option 1 i will have lets say this:
<select name="secondbox" id="#secondbox">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and if i choose Option 2 i would have lets say
<select name="secondbox" id="#secondbox">
<option value="8">Option 8</option>
<option value="9">Option 9</option>
</select>
And in adition based on those two selection box i need one link that changes url depending on those two. So it would be IF option from #firstbox = 1, and secondbox=2 #link is first.html
<a href="first.html" id="link" >Show </a>
I dont know if its doable in javascript, or is it better and more smooth to make it with PHP and small database... But i still dont know in that case how to change link of that button... Hope someone has an idea.

Alternatively, if you opt to use jQuery, of course you can use the onchange event. But first, you need to set a simple default values, wherein, it depends on what you select. Consider this example:
<select name="firstbox" id="firstbox" style="width: 100px;">
<option disabled selected>Select Value</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="select_boxes"></div>
<div id="link"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var default_values = {
"1": {"label": "first","values": [4,5]},
"2": {"label": "second","values": [8,9]},
"3": {"label": "third","values": [6,7]}
};
$(document).ready(function(){
$('#firstbox').on('change', function(){
var current = $(this).val();
$('#select_boxes').html('<select name="secondbox" id="secondbox" style="width: 100px;"></select>');
var options = '';
$.each(default_values[current].values, function(index, values){
options += '<option value="'+values+'">Option '+values+'</option>'; // fetch options
});
$('#secondbox').html(options); // add options
$('#link').html('show');
});
});
</script>
Sample Output

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>