0

I am using multiselect dropdown and binding it from sql database using jquery JSON. I am getting values, and also in code it's appending it without any error. But items are not showing up in UI.

As image shown, I am getting elements as an array and also its appending. enter image description here

But Items are not showing in UI enter image description here

Below is my code :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dummy.aspx.cs" Inherits="WREFKAIProjevtWIPTracker.WIPTracker.dummy" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css' />
    
</head>
<body>
    <form id="form1" runat="server">
        <select id="ddlmultiselect" class="selectpicker" multiple aria-label="Default select example" data-live-search="true">
            
        </select>
        <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js'></script>

        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script>
            var $j = jQuery.noConflict();
            $j(function () {
                BindDDL();
            });
            function BindDDL() {
                //debugger;
                var $s = jQuery.noConflict();
                var d = '{flag:"7"}';
                $s.ajax({
                    type: "POST", //GET or POST or PUT or DELETE verb
                    url: "../WIP.asmx/BindGrid",
                    data: d,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json", //Expected data format from server        
                    success: function (Response, status, xhr) {
                        $s("#ddlmultiselect").empty();
                        $s("#ddlmultiselect").append($("<option></option>").val(0).html("--Select--"));
                        $s(Response.d).each(function (value, item) {
                            $s("#ddlmultiselect").append($s("<option></option>").val(item.ID).html(item.iValue));
                        });
                        
                        //$s("#ddlKAIServiceLine").append(ddl);                        
                    },
                    error: function (error) {
                        // unBlockUI();
                    },
                    complete: function () {
                        // unBlockUI();
                    },
                    failure: function () {
                        // unBlockUI(); alert("Sorry, we were unable to find the records.");
                    }
                });
            }
        </script>
    </form>
</body>
</html>
Sumeet Kumar
  • 321
  • 4
  • 17
  • Hi, after appending options add `$('#ddlmultiselect').selectpicker('refresh')` to refresh your selectpicker see if that works . – Swati Mar 21 '23 at 11:48
  • `.selectpicker` is a classname, not a function. It's giving error as `Uncaught TypeError: $s(...).selectpicker is not a function`. – Sumeet Kumar Mar 21 '23 at 12:41
  • Are you using bootstrap select library because you have imported it ? Also, refer [this](https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefresh) to know why we need to add that . – Swati Mar 21 '23 at 13:35
  • ya but it is giving me same error – Sumeet Kumar Mar 21 '23 at 16:17
  • 1
    It's issue with CDN'S which you have imported . Please check [this](https://stackoverflow.com/a/43366799/10606400) might help. – Swati Mar 23 '23 at 04:59

0 Answers0