Reset Bootstrap style DropDownList option value in ASP.Net using jQuery

Last Reply one year ago By kalpesh

Posted one year ago

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>
Posted one year ago

Check the below sample code for your reference and Implement the Code as Per your code logic.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="form-group">
        <div class="col-md-12">
            <asp:Label ID="Label1" runat="server" CssClass="control-label col-md-1" Text="Marca:"></asp:Label>
            <div class="col-md-2">
                <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 class="col-md-2">
                <asp:DropDownList ID="ddlFruits" runat="server">
                    <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 class="col-md-7">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <div class="col-md-2">
                <input type="button" id="btnReset" value="Reset" class="btn btn-default" />
            </div>
            <div class="col-md-10">
            </div>
        </div>
    </div>
    <br />
    <br />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
    <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="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"></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 () {
                $("#ddlFruits")[0].selectedIndex = 0;
                $('#ddlMarca option').prop("selected", false).trigger('change');
            });
        }); 
    </script>
    </form>
</body>
</html>

Screenshot


Posted one year ago
jmontano says:
            $("#btnReset").bind("click", function () {
                 
                $('#ddlMarca option').prop("selected", false).trigger('change');
            });

If above script code not working then try by below script code to clear bootstrap selectpicker dropdown.

$("#btnReset").bind("click", function () { 
    $('.bootstrap-select .filter-option').text($("select[name=ddlMarca] option[value='']").text());                                
});