This question already has an answer here:
Event Handling when option is selected from dropdown menu
(1 answer)
Closed 6 years ago.
I need to handle alert event on chosen option.
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
For ex., if I choose "B" option, I want alert like "Chosen option is: B", etc...
Thank you!
Try It Once Its Working .
function myFunction() {
var x = document.getElementById("mySelect").value;
alert('You Selected'+' '+x);
}
<p>Select a any value in list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="1">A
<option value="2">B
<option value="3">C
<option value="4">D
</select>
Working example: (It's a jQuery example, using selectors and events basically)
// Wait for DOM load
$(document).ready(function() {
// Binding change event to the <select>
$('#my_select').change(function() {
// Saving the HTML corresponding to the value selected
$selected = $('#my_select option:selected').text();;
// Debugging actual selection DOM-node on console
console.log($('#my_select option:selected'));
// Showing the message
alert("Chosen option is: " + $selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I have set an ID to identify you select -->
<select id="my_select">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
Some official jQuery's documentation links:
http://api.jquery.com/category/events/
http://api.jquery.com/category/selectors/
Related
I have an HTML list that I want to remove elements from as the user chooses. I've tried using this code from this thread but my issue seems to be accessing the element.
Here's my HTML:
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>
And here's my JavaScript:
$( document ).ready(function() {
var shipList=document.getElementById('shipSelec');
});
function placeShip() {
shipList.remove(shipList.options[shipList.selectedIndex].value;);
shipList.remove(shipList.options[shipList.selectedIndex]);
shipList.remove(shipList.options[selectedIndex]);
shiplist.remove([shipList.selectedIndex])
}
I have several instances of the remove() method but that none of them work.
However, the best way I can convey my error to you is through JSFiddle.
As you've jQuery loaded on the page, use it to bind events and remove element from DOM.
First, bind click event on the button using click. Use the :selected pseudo-selector to select the selected option from the dropdown and remove() to remove it from DOM.
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
$(document).ready(function() {
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button">Remove Selected Ship</button>
</div>
Updated Fiddle
Note that there are several issues in your code
In fiddle "LOAD TYPE" option should be selected to "No Wrap".
jQuery is not included. This can be included using the "Frameworks & Extensions" option in the JavaScript tab
Syntax error in the first statement in the placeShip() near .value;);
shipList is local to the ready callback and hence not accessible from outside of it. Not even in placeShip()
With pure JavaScript
var shipList = document.getElementById('shipSelec');
shipList.options[shipList.selectedIndex].remove();
Fiddle
$("#btn").click(function() {
$("#shipSelec option:disabled").prop("disabled", false)
$("#shipSelec option:selected").prop("disabled", true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" id="btn">Remove Selected Ship</button>
I suggest just disable the option not remove
This question already has answers here:
Why does Jquery only affect the first div element? [duplicate]
(4 answers)
Closed 6 years ago.
I'm trying to get the value from each option I select h , but the jquery return the value for the first select only!.
I have no idea how to fix it.
<select id="Group" >
<option value="">Select Group</option>
<option value="1">1</option>
<option value="1">d</option>
<option value="1">d</option>
<option value="1">d</option>
</select>
<select id="Group" >
<option value="">Select Group</option>
<option value="2">1</option>
<option value="2">d</option>
<option value="2">d</option>
<option value="2">d</option>
</select>
Jquery code
<script>
$(document).ready(function(){
$('#Group').change(function(){
var group_id2 = $('#Group').val();
alert(group_id2);
$.ajax({
url:"../include/ajax_process/doc_process.php",
method:"POST",
data:{group_id:group_id},
dataType:"text",
success:function(data)
{
$('#employee').html(data);
}
});
});
});
</script>
Couple of things -
ID should always be unique, so you shouldn't have two elements on the page with the same ID. That said, let's assume you update this a bit and maybe use a class, for example -
$('.group').change(function(){
OK, now you want the value of the CHANGED element. You can do this by looking at the event
$('.group').change(function(e) {
var data = $(e.target).val();
// (etc do the rest of your code here)
});
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 9 years ago.
I have created a simple drop down menu using JavaScript where it displays the month of the year. Each option has a value. When using the onchange function to call another function count, I am unable to read the value of the drop down menu.
Function count:
<script language="javascript" type="text/javascript">
function count(){
debugger;
alert(lst_MonthDrop.value);
}
</script>
Drop down menu:
<select name="lst_MonthDrop"
style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;"
onchange="count()">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
JSFIDDLE
Modify the onchange to call count(this)
<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;" onchange="count(this)">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
Then give the count function an argument:
function count(s){
alert(s.value);
}
When the onchange event is called it will pass a reference to the select element and you can then get the value from that reference.
Give your select an id and retrieve the content like:
var lst_MonthDrop = document.getElementById('lst_MonthDrop');
alert(lst_MonthDrop.options[lst_MonthDrop.options.selectedIndex].innerHTML);
Give the select an ID: <select name="lst_MonthDrop" id="first-month"> and try again with this function:
function count(){
var firstMonth = document.getElementById('first-month');
// Value of the selected option
alert(firstMonth.value);
// Text of the selected option
alert(firstMonth.options[firstMonth.selectedIndex].text);
}
What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....
Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo
AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.
This question already has answers here:
keep user checked radiobtn checked even after postback
(2 answers)
Closed 5 months ago.
How do I retain whatever was selected from the dropdown even after page refresh so user knows what he/she selected using jquery? or javascript?
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option>
</select>
Try this:
<select id="hospitalDropDown" onchange="window.open('http://mysite.com/events/Pages/default1.aspx?hos='+this.value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="All">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
$(document).ready(function(){
var value = window.location.href.match(/[?&]hos=([^&#]+)/) || [];
$('#hospitalDropDown').val(value[1]);
});
<select id="hospitalDropDown">
<option value="">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#hospitalDropDown').val('<?php echo $_GET['hos']; ?>');
$('#hospitalDropDown').change(function() {
location.href = 'http://mysite.com/events/Pages/default1.aspx?hos=' + $(this).val();
});
});
</script>