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,
Related
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!
This question already has answers here:
The onclick event does not work for options
(5 answers)
Closed 8 years ago.
I have a html dropdown defined as
<select name="evidence_selected"id="evidence_selected">
<option id="a">A</option>
<option id="b">B</option>
<option id="c">C</option>
<option id="new">New</option>
</select>
I want to fire an on click event on "new" so that when a user clicks on it, a free form appears where they enter some other value that is not on dropdown.
The id of the form is "new_value".
I tried
$("#new").click(function(){
$("new_value").show();
});
It seems the click event wont fire.
Any help(with code snippet) will be highly appreciated.
Regards
Selects use the change event
$('select').change(function () {
if ($(this).val() === 'New') {
// Handle new option
}
});
This will trigger any time any of the options are selected.
I advice doing something like this instead:
$('#evidence_selected').change(function(){
if($(this).val() == "New"){
$("#new_value").show();
} else {
$("#new_value").hide();
}
});
JSFiddle Demo
This way, the function will be triggered when the value of the select changes, but it'll only show #new_value if the option <option id="new">New</option> was selected...
Also if the ID of your form is new_value, you should reference it as $("#new_value").show(); instead of $("new_value").show(); (you're lacking the #)
Try this:
html
<select name="evidence_selected" id="evidence_selected">
<option id="a">A</option>
<option id="b">B</option>
<option id="c">C</option>
<option id="new">New</option>
</select>
js
$("#evidence_selected").change(function(){
if($(this).val()=="new"){
$("new_value").show();
}
});
fiddle
$("#evidence_selected").on('change', function() {
var optionId = $('option:selected', this).attr('id');
if(optionId === 'new') {
// your action here
}
});
I have a select list:
Choose a Story:</br>
<select name="Book" id="book">
<option value="empty" selected disabled></option>
<option value="Book1">Book1</option>
<option value="Book2">Book2</option>
<option value="Book3">Book3</option>
<option value="Book4">Book4</option>
</select><br><br>
I got the script to work to display the chosen item onchange below the options thanks to some assistance from other stackoverflow users. But it only states what option is chosen instead of getting it to say "You chose _." after something other than the blank option is chosen.
<script>
$('#book').on('change', function() {
$('#result_element').text(this.value);
});
</script>
<script>
if ((document.getElementsByTagName("book")this.value) != empty)
{
document.write("You chose ")
}
</script>
<span id="result_element"></span>
Basically, I want it to show the "You chose __." after they select something.
a) You will need to do it in the event handler. Otherwise the code is executed when the page is loaded (and not again), instead of after the user has chosen an option
b) Do not use document.write!
<script>
$('#book').on('change', function() {
var output = "";
if (this.value != "empty") {
output = "You chose " + this.value;
}
$('#result_element').text(output);
});
</script>
<span id="result_element"></span>
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);
}
I am using a selectbox:
<select name="priority" id="priority">
<option value="4">Low</option>
<option value="3" selected="selected">Normal</option>
<option value="2">High</option>
<option value="1">Emergency</option>
</select>
When user select "Emergency", then a confirmation box opens and if user confirm, then "Emergency" is selected. Otherwise "Normal" should be selected. For This, I am using jquery:
$(document).ready(function() {
$('#priority').change(function(){
if($(this).val()=='1'){
if(confirm("Are you sure this is emergency?")){
return true;
}
else{
//here some code is needed to select "Normal".
}
}
});
});
Now, How can I do that?
Since you're just returning in the confirmation case, you can shorten your logic down to this:
$(function() {
$('#priority').change(function(){
if($(this).val()=='1' && !confirm("Are you sure this is emergency?")){
$(this).val('3');
}
});
});
You can give it a try here.
else{
$(this).find("option[value=3]").attr("selected","selected");
//and trigger change after that if you need it
$(this).change();
}
The following code snippet should do what you are after - it selects the priority select element by ID and then sets the selected value to 3.
else
{
$('#priority').val(3);
}