for the below drop down list, when i select any value, I have to do a confirm (OK/Cancel), if user selects Cancel, I need to retain the previous state. What's happening is when hitting on Cancel and doing return false;, the new value is getting selected, and not retaining the previous value. How can i make sure the previous value is selected, when cancel is clicked. I tried using the below code but doesn't seem to help:
var ele = document.getElementById('mySelect');
ele.selected = ele.defaultSelected;
return false;
<select id="mySelect" multiple="multiple">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
Here you go :)
<script type="text/javascript">
$(document).ready(function () {
$("#mySelect").mousedown(function() {
var old_value = $("#mySelect").val();
var confirm_selection = confirm("Are you sure?");
if (!confirm_selection)
{
$("#mySelect").val(old_value);
return false;
}
});
});
</script>
Just change the confirm text to whatever you like.
Have to use mousedown() instead of change() as when using change the function will be called AFTER the new item is selected and thus there is no way to know what previous item was selected.
I think -I think-, the only solution is to keep previous selected value and set it again on cancel. You can easyly get an set the value of your select with val().
Briefly:
prev_val = $('#myselect').val();
if (cancel) {
$('#myselect').val(prev_val);
}
Related
I have a multiple select list. When user unselects the selected option, I want to know the value of the unselected option made by user. How do I capture it?
My sample code is as below.
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I have following jquery code to allow user to select multiple options
$('option').mousedown(function(){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false :true);
});
Mouse events aren't available cross browser
My suggestion would be always store array of previous values on the select.
On every change you can then compare to prior value array and once found update the stored array
$('#myselect').on('change', function() {
var $sel = $(this),
val = $(this).val(),
$opts = $sel.children(),
prevUnselected = $sel.data('unselected');
// create array of currently unselected
var currUnselected = $opts.not(':selected').map(function() {
return this.value
}).get();
// see if previous data stored
if (prevUnselected) {
// create array of removed values
var unselected = currUnselected.reduce(function(a, curr) {
if ($.inArray(curr, prevUnselected) == -1) {
a.push(curr)
}
return a
}, []);
// "unselected" is an array
if(unselected.length){
alert('Unselected is ' + unselected.join(', '));
}
}
$sel.data('unselected', currUnselected)
}).change();
DEMO
Great question, i wrote some codes for detecting unselected options using data attributes.
$('#select').on('change', function() {
var selected = $(this).find('option:selected');
var unselected = $(this).find('option:not(:selected)');
selected.attr('data-selected', '1');
$.each(unselected, function(index, value){
if($(this).attr('data-selected') == '1'){
//this option was selected before
alert("I was selected before " + $(this).val());
$(this).attr('data-selected', '0');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="select">
<option data-selected=0 value="volvo">Volvo</option>
<option data-selected=0 value="saab">Saab</option>
<option data-selected=0 value="opel">Opel</option>
<option data-selected=0 value="audi">Audi</option>
</select>
If I understand you correctly, you want the option that just got unselected, right?
if so, try this:
create a variable "lastSelectedValue" (or whatever you want to call it). When you select an option, assign to it, when you change the selected option, you can get the value and use it, and assign to it again
var lastSelectedOption = '';
$('select').on('change', function(){
//do what you need to do
lastSelectedOption = this.val();
});
here's a fiddle: https://jsfiddle.net/ahmadabdul3/xja61kyx/
updated with multiple: https://jsfiddle.net/ahmadabdul3/xja61kyx/
not sure if this is exactly what you need. please provide feedback
As mentioned by others, the key would be to compare the previous selected values with current value. Since you need to figure out the removed value, you can check if the lastSelected.length > currentSelected.length and then simply replace the currentSelected from the lastSelected to get the results.
var lastSelected = "";
$('select').on('change', function() {
var currentSelected = $(this).val();
if (lastSelected.length > currentSelected.length) {
var a = lastSelected.toString().replace(currentSelected.toString(),"");
alert("Removed value : " + a.replace(",",""));
}
lastSelected = currentSelected;
});
Working example : https://jsfiddle.net/DinoMyte/cw96h622/3/
You can try make it
$('#link_to_id').find('option').not(':selected').each(function(k,v){
console.log(k,v.text, v.value);
});
With v.text get the Text
With v.value get the Value
I am working on a form. One of my colleagues have used the are_you_sure.js which confirms to leave before saving a form.
Now the problem is if I have a dropdown say like this
<script type="text/javascript">
function get_cpc(cst_type)
{
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").show();
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
}
</script>
<select name="cost_type" id="cost_type" onchange="get_cpc(this.value);" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
When I am switching from non-selected options to selected option, then the change of state takes too much time
This means if I am selecting CPC/Do Not Track from CPA, then the dropdown works fast. But if I am selecting CPA from CPC/Do Not Track, then the state change takes almost 4 seconds..
That's due to the jquery.are-you-sure.js. So, I need to remove the select from the dropdown. How can I achieve this?
I put this code, $("select option").prop("selected", false);
but it doesn't even let me select any other option.
I'm not sure what you mean exacly, but can you share the are_you_sure.js file?¿
Also I have change your code maybe it helps and it´s a better way to do it. because it´s not a good practice use onchange(), so remove onchange from your html and do this, link: http://jsfiddle.net/hg5nz1w6/1/
js:
$(document).ready(function(){
$('#cost_type').on('change', function(){
var cst_type = $(this).val();
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
$("#camp_cpc").show();
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
});
});
html:
<select name="cost_type" id="cost_type" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
Below you can see some examples to remove the selected:
document.getElementById('myselect').selectedIndex = -1;
you can deselect all the options:
$("select").val([]);
or
$("select option").prop("selected", false);
Hope it´s helps!
Trying something that sounds simple but not working:
Allow a user to select an option from a dropdownlist and then have this displayed as an alert each time the user changes it. Here's what I've got so far:
<select name="pickSort" id="chooseSort" onchange="changedOption">
<option value="lowHigh" id="lowHigh">Price Low-High</option>
<option value="highLow" id="lowHigh">Price High-Low</option>
</select>
<script>
function changedOption() {
var sel = document.getElementsByName('pickSort');
var sv = sel.value;
alert(sv);
}
</script>
A better way of doing this without the inline stuff:
document.getElementById("chooseSort").onchange = function() {
alert(this.value);
};
jsFiddle here.
You need to call the function with parentheses changedOption()
<select name="pickSort" id="chooseSort" onchange="changedOption()">
First, I have this input in a form.
<select id="entry_14">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
Then I declared this variable.
var mygender = document.getElementById('entry_14').value;
but then, when I document.write, it already shows "Man" before the user even makes a selection, and after selecting woman, it still shows man.
How can I set the value of this variable to change, each time the user selects one of the options?
It executes immediately because your code is not in a function. You need to call this function when the select changes. Add an onchange handler to your select. In this example I pass this.value which is your select lists value to the function. Finally you can do whatever you want with that value.
<select id="entry_14" onchange="myfunction(this.value);">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
<script>
function myfunction(val) {
document.write(val);
}
</script>
Declare a onchange event handler.
document.getElementById('entry_14').onchange = function(){
var mygender = this.value;
document.write(mygender);
}
Add a onChange JS handler to the <select> element. The example below shows an inline way of doing this...
<select id="entry_14" onChange="updateMyGender();">
....
</select>
<script>
var mygender = document.getElementById('entry_14').value;
function updateMyGender()
{
mygender = document.getElementById('entry_14').value;
}
</script>
I think you are looking for this
var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value
var gender= mygender.options[mygender.selectedIndex].Text;//for text
I'm trying to get an alert message with Yes/No option, where clicking on 'Yes' reloads a another drop-down option, and 'No' would revert back to the previous selection. Here is what I'm trying to say (obviously doesn't work):
<select size="1" name="m" id="m">
<option selected value="1">apple</option>
<option value="2">ball</option>
<option value="3">cat</option>
<option value="4">dog</option>
<option value="5">egg</option>
</select>
$('#m').change(function() {
var answer = confirm("this will change your selection.");
if (answer) { // ie, if i click 'OK'
location.reload(); // reload the <select> option below to "selected"
} else {
break; // revert back to the previous selection
}
});
<select size="1" name="a" id="a">
<option selected value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
</select>
Many thanks in advance. Feel free to click, and edit.
I'm not too sure what you are trying to accomplish... is it this?
var _selected = $('#m').val();
$('#m').change(function() {
var answer = confirm("this will change your selection.");
if (answer) { // ie, if i click 'OK'
_selected = $(this).val();
$('#a').val(_selected);
} else {
$(this).val(_selected);
}
});
JavaScript's confirm() only displays OK and Cancel, not Yes or No.
Could you return false instead of break, because you are in a function?
Also, returning false does not cancel the change event. What you will need to do is store the previous selectedIndex, and if you have the confirm() return false, then set the selectedIndex back to the previous one.
Also, I hope you are wrapping that jQuery inside script elements and inside a $(document).ready().
Try removing the
break;
I tried to run the code and Firebug halts the code when it gets to that part
Best regards,