I have a HTML select dropdown with the multiple attribute.
The javascript code below lets me confirm the last selected option:
var pr = $("#iPRNum option:selected").last().val();
alert(pr);
It is working just fine if I select from top to bottom, but if I select the other way around, var pr is stuck with the first item selected.
Thank you very much...
Its working here
$("#iprnum").on("change", function() {
var pr = $("#iprnum option:selected").last().val();
alert(pr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="iprnum">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Do you need something else?
UPDATE
$('select').multipleSelect();
$("#iPRNum").on("change", function() {
var pr = $(this).val();
alert(pr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
<select multiple="multiple" id="iPRNum">
<option value="January">January</option>
<option value="feb">feb</option>
<option value="june">june</option>
<option value="art">art</option>
<option value="12">December</option>
</select>
Working demo with multiple-select library as you want
$("#iPRNum").on("change", function() {
var opt = $(this).val();
});
Related
Have checked the below link i am also facing the same issue but i am using select2.js please let me know how can i get the multi value in the same order which i have selected from multiselected dropdown.
jquery multiselect selected data order
There is a Select2 issue, in multi-select: selections do not appear in the order in which they were selected.
Below is a snippet using the workaround proposed in that issue by user xelax90:
$(document).ready(function() {
$("#select").select2({
width: "100%",
});
$("#select").on("select2:select", function (evt) {
var elm = evt.params.data.element;
$elm = $(elm);
$t = $(this);
$t.append($elm);
$t.trigger('change.select2');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<div class="container">
<select multiple="multiple" id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
I have a dropdown which i would like to trigger a function when something is selected.
<select id="myselect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
$(document).on("change", "#myselect", function(event) {
alert("you selected something");
});
The problem I have is that the function is not triggered if i choose option that has already been selected. I do understand that this is because nothing has been changed but is there a way around this?
I have tried
<select id="myselect" onmousedown="this.value='';" >
this was ok for the few options, but when i had many options when i needed to scroll down to select it would jump up and select the wrong option.
Any help much appreciated.
Try
<select id="myselect" onclick="alert('Something selected')">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
UPDATE
$(document).on("change", ".myselect",function(){
var idSelect = $(this).attr("id"); /*get the id select change*/
$(".myselect").each(function(){
var idSelectOther = $(this).attr("id");/*get the id of another select*/
if(idSelect != idSelectOther){ /*if id selected != other select then check value*/
if($("#"+idSelect).val() == $("#"+idSelectOther).val()){ /* if val same so alert the user.*/
alert("you already select this value");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" id="sel1">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
<select class="myselect" id="sel2">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});
I need to remove some options from the 2nd dropdown menu based on the first.
I have tried quite a few iterations to get it done but still it is not working.
Kindly provide with solutions
In the below code I need to remove the option from the 2nd dropdown already selected in the 1st one.
I have tried the mentioned HTML & Javascript Code
HTML
<form>
Source:
<select id = "box1" name="a">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
</select>
Destination:
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
</form>
JAVASCRIPT
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value='a']").remove();
});
}
$(document).ready(main);
I have tried entering the value as variable a with and without quotes but no effect. Although when i replaced 'a' with a specific value like 'Apple', then the code is working.
I think this is your answer ;)
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value="+a+"]").hide().siblings().show();
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
Hi kindly check https://jsfiddle.net/RRR0308/uubuumrz/1/
HTML
<select id="box1">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select id="box2">
<option>999</option>
<option>222</option>
<option>888</option>
<option>444</option>
</select>
jQuery
$(document).ready(function(){
$('#box1').on('change', function(){
var x=$(this).val();
$('#box2 option').each(function(){
if($(this).val()==x){
$(this).remove();
}
});
});
});
hide().siblings().show()
instead of.remove()`
The .remove() permanently removes the selected option in box1 from box2. so if you use .hide() and .show(), it would hide and show. try making these changes.
$('#box1').change(function(){
var v = $(this).val();
$('#box2').find("option[value="+v+"]").remove(); });
Try this simple one
Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.
Example:
.load('day.html #empId')
the "day" and "empid" part of .load can be changed on the user end.
[Link] [ID] submit
then it runs the rest of the script.
The part of the script I'm trying to make adjustable:
$('a').click(function() {
$('#metrics').load('day.html #empId', function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
})
});
I'm not sure if I explained it clear enough(new to jquery)
Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function.
$('a').click(function() {
var ds = $('#datasources option:selected').text();
var empId = $('#empIds option:selected').text();
$('#metrics').load(ds + '.html #' + empId, function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
});
And the HTML affected:
<div id="main">
<h1 id="metrics">Metrics</h1>
</div>
JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)
FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears
I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar
I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
$('<div id"metrics" />').load(
pD
+ wD
+ dD
+ eD, function(){
$(this).hide()
.appendTo('#main')
.slideDown(1000);
});
});
});
</script>
I then removed then .html # from the function and just added it in as a value to #empId options
<form>
<select class="dates" id="period">
<option value="p00"class="emp">Period</option>
<option value="p01">1</option>
<option value="p02">2</option>
<option value="p03">3</option>
<option value="p04">4</option>
<option value="p05">5</option>
<option value="p06">6</option>
<option value="p07">7</option>
<option value="p08">8</option>
<option value="p09">9</option>
<option value="p10">10</option>
<option value="p11">11</option>
<option value="p12">12</option>
<option value="p13">13</option>
<option value="p14">14</option>
</select>
<select class="dates" id="week">
<option Value="w00"class="emp">Week</option>
<option value="w01">1</option>
<option value="w02">2</option>
<option value="w03">3</option>
<option value="w04">4</option>
<option value="w05">5</option>
<option value="w06">6</option>
</select>
<select class="dates" id="day">
<option value="d00"class="emp">Select Day or Leave Blank for Week</option>
<option value="d01">1</option>
<option value="d02">2</option>
<option value="d03">3</option>
<option value="d04">4</option>
<option value="d05">5</option>
<option value="d06">6</option>
<option value="d07">7</option>
</select>
<select id="empId">
<option class="emp">Employee ID</option>
<option value=".html #JXS0001">John Smith</option>
</select>
Load Metrics
</form>
</div>
<div id="main">
<h1>Metrics</h1>
</div>
I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out #bloodyKnuckles