Implement the following tutorial: Reset (Clear) DropDownList selection (selected value) using JavaScript and jQuery But the reset is not implemented in a dropdownlist that implements bootstrap classes. How can I make it to implement the reset in the dropdown bootstrap. I attach my source code to help me find what I'm doing wrong. Greetings.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" id="me">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registro de Servicios</title>
<script type="text/javascript">
function Reset() {
var dropDown = document.getElementById("ddlGruas");
dropDown.selectedIndex = 0;
}
</script>
<script src="../scripts/1.9.1.jquery.min.js"></script>
<link rel="stylesheet" href="../css/alertify.core.css" />
<link rel="stylesheet" href="../css/alertify.default.css" id="toggleCSS" />
<style>
.alertify-log-custom {
background: blue;
}
</style>
<style type="text/css">
body
{
margin-top: 100px;
font-family: Arial;
font-size: 10pt;
}
input, select
{
width: 150px;
}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0" />
<!--Font Awesome (added because you use icons in your prepend/append)-->
<!-- <link rel="stylesheet" href="../css/font-awesome.min.css" /> -->
</head>
<body>
<br />
<form id="form1" runat="server" class="container">
<br />
<script src="../scripts/alertify.min.js"></script>
<script>
function NotificacionUsuarioNoRegistrado() {
document.getElementById("Error").click();
return false;
}
function NotificacionDatosRegistrados() {
document.getElementById("notificacion2").click();
return false;
}
function reset() {
$("#toggleCSS").attr("href", "../css/alertify.default.css");
alertify.set({
labels: {
ok: "OK",
cancel: "Cancel"
},
delay: 5000,
buttonReverse: false,
buttonFocus: "ok"
})
}
// ==============================
// Standard Dialogs
$("#alert").on('click', function () {
reset();
alertify.alert("El Usuario proporcionado no se encuentra registrado, verifique el dato e intentelo de nuevo");
return false;
});
$("#confirm").on('click', function () {
reset();
alertify.confirm("This is a confirm dialog", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#prompt").on('click', function () {
reset();
alertify.prompt("This is a prompt dialog", function (e, str) {
if (e) {
alertify.success("You've clicked OK and typed: " + str);
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
// ==============================
// Ajax
$("#ajax").on("click", function () {
reset();
alertify.confirm("Confirm?", function (e) {
if (e) {
alertify.alert("Successful AJAX after OK");
} else {
alertify.alert("Successful AJAX after Cancel");
}
});
});
// ==============================
// Standard Dialogs
$("#notification1").on('click', function () {
reset();
alertify.log("Standard log message");
return false;
});
$("#success").on('click', function () {
reset();
alertify.success("Success log message");
return false;
});
$("#notificacion2").on('click', function () {
reset();
alertify.success("Los datos del servicio han sido registrados correctamente");
return false;
});
$("#notificacion3").on('click', function () {
reset();
alertify.error("Contraseña incorrecta. Verifique el dato e intentelo de nuevo");
return false;
});
// ==============================
// Custom Properties
$("#delay").on('click', function () {
reset();
alertify.set({ delay: 10000 });
alertify.log("Hiding in 10 seconds");
return false;
});
$("#forever").on('click', function () {
reset();
alertify.log("Will stay until clicked", "", 0);
return false;
});
$("#labels").on('click', function () {
reset();
alertify.set({ labels: { ok: "Accept", cancel: "Deny"} });
alertify.confirm("Confirm dialog with custom button labels", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#focus").on('click', function () {
reset();
alertify.set({ buttonFocus: "cancel" });
alertify.confirm("Confirm dialog with cancel button focused", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
$("#order").on('click', function () {
reset();
alertify.set({ buttonReverse: true });
alertify.confirm("Confirm dialog with reversed button order", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
});
return false;
});
// ==============================
// Custom Log
$("#custom").on('click', function () {
reset();
alertify.custom = alertify.extend("custom");
alertify.custom("I'm a custom log message");
return false;
});
// ==============================
// Custom Themes
$("#bootstrap").on('click', function () {
reset();
$("#toggleCSS").attr("href", "../themes/alertify.bootstrap.css");
alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
if (e) {
alertify.success("You've clicked OK");
} else {
alertify.error("You've clicked Cancel");
}
}, "Default Value");
return false;
});
function enviar_formulario() {
document.frm.submit()
}
</script>
<div class="form-horizontal">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<!-- <input class="form-control" id="date1" name="date" placeholder="MM/DD/YYYY" type="text"/> -->
</div>
</div>
</div>
<div class="form-group">
<asp:Label ID="Label1" runat="server" CssClass="control-label col-md-4" Text="Marca:"></asp:Label>
<div class="col-md-3">
<asp:DropDownList ID="ddlMarca" runat="server" CssClass="form-control selectpicker validate[required]"
data-show-subtext="true" data-live-search="true">
<asp:ListItem Value="">Please select</asp:ListItem>
<asp:ListItem Value="1">Mango</asp:ListItem>
<asp:ListItem Value="2">Apple</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-lg-offset-4">
<div class="col-sm-12 col-xs-12">
<!-- <input type="reset" class="btn btn-default" value="Restablecer" /> -->
<input type="button" id="btnReset" value="Reset" class="btn btn-default" />
</div>
<link rel="stylesheet" href="../css/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="../css/ValidationEngine.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/font-awesome.min.css" />
<!-- <link href="../css/bootstrap.css" rel="stylesheet" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script type="text/javascript" src="../scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="../scripts/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap-datepicker3.css" />
<script src="../scripts/bootstrap-datepicker.es.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var date_input = $('input[name="date"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
showOnFocus: true,
language: 'es'
})
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript">
$(function () {
$("#form1").validationEngine('attach', { promptPosition: "topRight" });
$("#btnReset").bind("click", function () {
$('#ddlMarca option').prop("selected", false).trigger('change');
});
});
</script>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="../scripts/2.6.4.jquery.validationEngine.min.js"></script>
<script type="text/javascript">
function DateFormat(field, rules, i, options) {
var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
if (!regex.test(field.val())) {
return "Please enter date in dd/MM/yyyy format."
}
}
</script>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<!-- Include Date Range Picker -->
</body>
</html>
