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')
Related
When I try to use the Array.prototype.some() function on what I think should be an array as the result of an Array.prototype.map() from .filter() I get
.some is not a function
Here is a short snippet demonstrating the error with sufficient setup:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Attempt to use some on the numbers array
numbers.some(function (number) {
console.log(number);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>
You (I) are mixing up JS array functions and JQuery functions. The .filter() in your post is actually a JQuery function that returns a JQuery object. From there, map is another JQuery function returning JQuery and thus .some() on your object does not exist as it does not exist as a JQuery function.
A suitable solution would be to use the JQuery .each() function instead like this:
// Get all options from dropdown
var options = $("#mySelect option");
// Get array of strings matching regex from options
var numbers = options.map(function (index, option) {
return option.value.match("[0-9]+")[0];
});
// Iterate through your object with JQuery's .each()
numbers.each(function (index, number) {
console.log(number);
// You can return false to break this loop early similarly to .every() (or inversely to .some) on JS arrays
if (number == 5){
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Drop down menu with 10 options in words -->
<select id="mySelect">
<option value="1">One 1</option>
<option value="2">Two 2</option>
<option value="3">Three 3</option>
<option value="4">Four 4</option>
<option value="5">Five 5</option>
<option value="6">Six 6</option>
<option value="7">Seven 7</option>
<option value="8">Eight 8</option>
<option value="9">Nine 9</option>
<option value="10">Ten 10</option>
</select>
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
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')
How to select dropdown option at the time of document load using Jquery?
Use
$(document).ready(function(){
$('#select-Id').val("rightVal");
});
Example:
For
<select id='days'>
<option value="sun">Sunday</option>
<option value="mon">Monday</option>
</select>
Use below code to select Monday
$(document).ready(function(){
$('#days').val("mon");
});
HTML:
<select id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Jquery:
$(document).ready(function(){
$('#sel').val('2');
});
See Demo
You can use
$(document).ready(function(){
$('#sel').val('myValue'); // to set the current value
var selectedvalue=$('#selectId').val(); // get the selected value
alert(selectedvalue);
});
DEMO.
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>