This question already has answers here:
Get selected value of a dropdown's item using jQuery
(31 answers)
Closed 6 years ago.
I have an array of select field and want to get the value of selected option using jQuery.
Select field is like
<select name="a[]" onchange="getValue(this)">
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="a[]" onchange="getValue(this)">
<option value="21">21</option>
<option value="22">22</option>
</select>
and my javascript code is
function getValue(ele) {
alert(ele.val());
}
But it is not working.
<select name="a[]">
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="a[]">
<option value="21">21</option>
<option value="22">22</option>
</select>
javascript
$("select").on("change", function (event){
alert($(this).val());
})
if you dont want to select all the select input list then you can do this also
$("select[name='a\[\]']").on("change", function (event){
alert($(this).val());
})
this will only select only select list with name=a[]
The val() is a jQuery method which can't use with DOM object. To get value use value property of the element instead.
function getValue(ele) {
alert(ele.value);
// with jQuery it should be
// alert($(ele).val());
}
function getValue(ele) {
alert(ele.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="a[]" onchange="getValue(this)">
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="a[]" onchange="getValue(this)">
<option value="21">21</option>
<option value="22">22</option>
</select>
Since you are tagged jQuery in your question use change() event handler, Inside the change event callback this refers to the corresponding dom object.
// select element with the name attribute equals
// selector can be used and then bind event handler
$('[name="a[]"]').change(function() {
// get the value
alert(this.value)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="a[]">
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="a[]">
<option value="21">21</option>
<option value="22">22</option>
</select>
Try this :
$(document).ready(function(){
$("select").on("change",function(){
alert($(this).val());
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<select name="a[]">
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="a[]">
<option value="21">21</option>
<option value="22">22</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select").on("change",function(){
alert($(this).val());
})
})
</script>
</body>
</html>
Related
I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>
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
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
I know this going to be a very basic question, but please be patient with me as I have just started using js and jquery.
Here is my part of code -
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
</body>
</html>
now I am not understanding how to write a onchange function where I can do all my query and dispplay my result when user selects any value from the dropdown list. And after that I would like to store the selected value in a variable and use that value in the same page ?
Lets say you give an id called mySelect to your select input.
Then you can define:
<script type="text/javascript">
$('#mySelect').on('change', function () {
// do your thing
});
</script>
The above attaches an onchange event (jQuery) to your element and will be triggered every time a user changes the selection.
you will use a handler
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
<script>
$( document ).ready(function() {
$( "select" )
.change(function () {
alert('OnChange happened');
//you can add your stuff here
});
})
});
</script>
</body>
</html>
I have created you a fiddle :)
it uses
$('#duration').on('change', function () {
var selectedEl = $('#duration').val();
console.log(selectedEl);
});
To detect a change in select and val() to get the selected option.
Instead of this :
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
Try This :
<select name="dateRange" size="1" onchange="submit();">
And in 'MODULE.php' get the selected value using :
$var = $_POST['dateRange'];
echo $var;
And then write your query..
Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>