We Keep Coding

Remove "selected" from an option of a dropdown

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!

Select Drop down Form Validation (Display text)

I am trying to validate a form.
What I am trying to do is validate the form by validating the Option display text not the option value, since the option values are int
Example:
<option value="selectcard">Please select</option>
If user clicks submit the form should validate if the option display says Please Select
regardless of what the option value is.
Code which is not working
function fun(){
$('#cardtype').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Please select") {
$('.showotherpDescription').show();
} else {
}
});
}
Not working: http://jsfiddle.net/f5hxpo7g/2/
Also including the regular working example for validating the form based on option value
Validates Based on option value http://jsfiddle.net/f5hxpo7g/1/
Please let me know what i am doing wrong.
Thanks in advance.

Your function should be like this:
function fun()
{
var ddl = document.getElementById("cardtype");
var valor = ddl.options[ddl.selectedIndex].text;
if (valor == "--- Please select ---")
{
alert("Please select a card type");
}
}
Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

I fixed it, you should use this JS:
$(function () {
$('#subbutton').click(function () {
if ($('#cardtype option:selected').text() === "Please select")
{
alert("PLEASE SELECT");
}
});
});
And remove onclick="..." from the button, you don't need it. Also add id="subbutton.
Here's the working JSFiddle.

I checked out the jsfiddle you referenced and modified it slightly to make it work, you can see it here.
The issue with the code you provided is, IMO:
An issue with the purpose of your function (validation) and the event you're subscribing the code to (the combo selection changed event)
The way you're obtaining the text from the currently selected option, you should create the selector based on the element that contains the options, otherwise, if you have more than 1 combo in your page, you will get lots of values (one for each selected option).
Check out the code in the jsfiddle i provided and let me know if you need more information.
For reference, here is the code i used:
HTML:
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<input type="button" onclick="fun()" value="click here">
JS:
function fun(){
var cmb = document.getElementById('cardtype');
var sel = cmb.options[cmb.selectedIndex].text;
if (sel == "--- Please select ---") {
alert('Please select a different option');
//$('.showotherpDescription').show();
} else {
}
}
}

How do I show a div when a drop down is set to "No"?

I am working on a form that has the address fields hidden by default. If someone has not ordered before, they change the drop down from Yes to No and the Address field should show up.
The drop down is coded as follows:
<label for="have_ordered_before"><span>*Have you ordered from us before?</span>
<select name="have_ordered_before" id="have_ordered_before">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</label>
and the Address div is as follows:
<div id="address-info" style="display:none">
form details go here...
</div>
The script I am trying to use is:
<script type="text/javascript">
function check_dd() {
if(document.getElementById('have_ordered_before').value == "Yes") {
document.getElementById('address-info').style.display = 'none';
} else {
document.getElementById('address-info').style.display = 'block';
}
}
</script>
I am open to solutions here and would appreciate any assistance. Thanks.

You need to bind the event change (in this case change, click/keypress are other examples) to the function to check:
document.getElementById('have_ordered_before').onchange = check_dd;
I've made you a small example
If you want jQuery*:
$('#have_ordered_before').on('change',check_dd);
Or, if you want the whole thing jQuery*:
$('#have_ordered_before').on('change',function(){
$('#address-info').css({display: $(this).val()=='Yes' ? 'none' : 'block' });
});
And again, the example
*Both require a document-ready

this is how you can do in jQuery
$(function(){
$('#have_ordered_before').change(function(){
var val = $(this).val();
if(val == 'Yes')
$('#address-info').hide();
else
$('#address-info').show();
});
});

Via jQuery :
use .change()
$('#selectId').change(function(){
if($('#selectId option:selected').val() == "No"){
$('#divId').show();
} else {
$('#divId').hide();
};
})

You're missing the call to the function: onchange="check_dd()"

Select-box control with jquery

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);
}

Yes/No confirmation message

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,