Looking for a dropdownlist with checkboxes in asp.net mvc but without the use of Entity Framework

I am in need of a dropdown list with checkboxes in asp.net mvc. The issue is that my view already has a layout page with existing script files, which seem to be causing a disturbance in the original layout.

I have tried various solutions such as rearranging the script files, commenting out individual scripts to see their impact, etc.

Here is my dropdown list:

@Html.DropDownListFor(m => m.CompanyId,(IEnumerable<SelectListItem>)ViewBag.cmpName, new { @id = "drpdown", @class = "listbox" ,@multiselect="multiselect"})

Included files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.5.js"></script>

And here is the javascript:

<script type="text/javascript">
    $(function () {
        $('#drpdown').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

Despite my efforts, I expected the dropdown with checkboxes but unfortunately, I did not get any checkboxes: 1

I am aiming for something like this: 2

Answer №1

The example I provided contains the solution to your issue. The reason your code is not functioning correctly is because you failed to properly import the required plugins.

  • Make sure to import the jquery library and bootstrap library before adding your multiselect plugin.

I believe this example will guide you in resolving the problem.

 $(function () {
      $('#dropdown').multiselect({
          includeSelectAllOption: true
      });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13/dist/js/bootstrap-select.min.js" type="text/javascript"></script>

<select id="dropdown" multiple="multiple">
    <option value="1">Example 1</option>
    <option value="2">Example 2</option>
    <option value="3">Example 3</option>
</select>

Answer №2

Simply delete this

<script src="http://code.jquery.com/jquery-1.5.js"></script>

this will cause interference with the functioning jquery plugin

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to dynamically set the active panel of a JQuery Accordion when making a call?

Currently, I am faced with a scenario where I need to implement a greybox popup window using jQuery Accordion from the main page via links. I am curious to know if it is doable to specify a default active panel for the accordion when calling it. Below is ...

Exploring the differences between utilizing Node JS Express for server-side development and displaying console output to

Recently, I started delving into the world of node js and came across IBM's speech to text sample application (https://github.com/watson-developer-cloud/speech-to-text-nodejs). This app utilizes the express framework and showcases transcribed audio fr ...

IE9 causing issues with Angularjs ng-route - views fail to display

I am new to AngularJS and currently working on developing an application using AngularJS along with Coldfusion for database data retrieval. However, I am facing compatibility issues specifically with IE9 (which is the default browser in my office). The ap ...

Implementing a Push System without using node.JS

I am looking to develop a notification system similar to Facebook's, where notifications appear on the bottom-left side of the screen when someone interacts with your posts, for example. However, my challenge is that I need the server to send real-ti ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Copying to the clipboard now includes the parent of the targeted element

Edit - More Information: Here is a simplified version of the sandbox: https://codesandbox.io/s/stupefied-leftpad-k6eek Check out the demo here: https://i.sstatic.net/2XHu1.jpg The issue does not seem to occur in Firefox, but it does in Chrome and other ...

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

In my Next.js project, I am looking for a way to make a modal continue to stay

I am looking to implement a feature where the modal remains visible even after a website refresh. Currently, when a user logs out, the page refreshes and the modal displaying "sign-out successful" disappears. My goal is to have the modal reappear after t ...

Commencing a New Ember.js Venture

I've recently started using Ember.js and I'm used to simply typing rails project33 to create a new Rails project. But with Ember, it seems like there are multiple steps involved: mkdir project43 && cd project43 npm install -g genera ...

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

I'm currently attempting to dynamically add HTML elements using JavaScript with a directive: document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; or var ele = document.createElement("div"); ele.setAttr ...

Is it possible to modify the CSS injected by an Angular Directive?

Is there a way to override the CSS generated by an Angular directive? Take, for instance, when we apply the sort directive to the material data table. This can result in issues like altering the layout of the column header. Attempting to override the CSS ...

Installing and loading Node.js modules on the fly

I am currently developing a Node.js module called A that relies on another Node.js module, B, from NPM. With new versions of module B being released on NPM, I want my module A to automatically update to the latest version of module B (ensuring it always us ...

Revise Script to Duplicate Alt Attribute onto Miniatures

I'm customizing a gallery plugin for a website that I am currently developing, aiming to add support for titles. The script I am using can be found here: DEMO: http://jquery.malsup.com/cycle/pager2.html CODE: All the functionalities are in place e ...

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

I've set up my HTML form with the following structure: <div class="container"> <div class="form-group" ng-controller="studentController"> <form role="form" class="well form-horizontal" id="registerForm" name="forms.register ...

Encountering issues in transmitting form data to a Node server from Angular

In my Angular application, I am working on creating a registration page with validation. Once the user fills out the form and submits it, the data is sent to the server and saved in MongoDB. This is the approach I have taken: register_user() { const ...

What is the best way to handle parsing JSON with special characters in JavaScript?

Content stored in my database: "Recommended cutting conditions" When using Json_encode in PHP, the result is: {"table1":[{"Item":{"original_text":"\u63a8\u5968\u5207\u524a\u6761\u4ef6 \b"}}]}; In JavaScript : var str ...

Code for remotely connecting to a server and starting a Node.js application called app.js via SSH

I am attempting to establish an SSH connection to two servers sequentially in order to execute the following command: sudo node app.js This is the code I am using: #!/bin/bash while read line; do ssh -i "sshtest.pem" ec2-user@$line "sudo node app. ...

React-Image-Annotate encountered an issue: SyntaxError - The import statement cannot be used outside a module

Encountering an issue while trying to set up react-image-annotate. Here is the problem I am facing initially: https://i.stack.imgur.com/XgYPd.png This is how I have implemented it: import React from 'react' import ReactImageAnnotate from ' ...

Guide on dynamically loading email contacts options in selectize.js

I have been working with selectize.js to create an email contacts feature. However, I am facing an issue where the mail list retrieved from the database is displaying as undefined in selectize. Strangely, when I manually enter the return value, everything ...