Is there a way to display the selected values from Select2 as a List below the dropdown menu? https://i.sstatic.net/Odewz.gif
I am using a custom select option from this 3rd party site, not the standard Select2. I'm currently stuck on how to move the selections to a different container.
Here is what my current Select2 looks like: https://i.sstatic.net/NgvUe.png
If anyone has any guidance on where to begin with this, it would be greatly appreciated.
With thorough research and development, I successfully implemented the following code.
$(document).ready(function(e){
var $source_select = jQuery('#source_id');
var $source_display_container = jQuery('.vendor_container');
$source_select.select2({
placeholder: 'Select Sources',
allowClear: true,
closeOnSelect: false,
}).on('change', function() {
var $selected = $(this).find('option:selected');
var $container = $source_display_container;
var $list = $('<div class="content">');
$selected.each(function(k, value) {
var $source_html_row = $('<div>').addClass('row');
$source_name = $(value).text();
$source_id = $(value).attr('data-vendor_id');
$source_html_row.append(getSourceNameColumn($source_name, value, $source_id));
$source_html_row.append(getCPIColumn($source_id, value));
$source_html_row.append(getQuotaColumn($source_id, value));
$source_html_row.append(getScreenerColumn($source_id,value));
$source_html_row.append(getQuotaAssignmentColumn($source_id, value));
$source_html_row.append(getRemoveColumn(value));
$list.append($source_html_row);
});
$container.html('').append($list);
}).trigger('change');
});
I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...
We specialize in creating browser extensions for Chrome, Firefox, and Safari. Our latest project involves implementing context menus within the extensions that will appear when users right-click on any editable form element. I attempted to incorporate an e ...
Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...
I am looking to retrieve the names of all visible columns when a button is clicked in order to save them in the database. For example - colName - Col1, Col2, Col3, Col4, Col8, Col9 After saving the column names in the database, users should only see thos ...
Is it possible to retrieve compiled CSS (as a string) from an Angular2+ component? @Component({ selector: 'test-graph', templateUrl: './test-graph.component.html', styleUrls: ['./test-graph.component.scss'] }) export cla ...
One way I have optimized my Wordpress navigation is by using CSS sprites. To make this work, I had to use PHP to determine the current page within the section. Here is the CSS code: #sidebarnav ul#sidenav li.visionside a {width:204px; height:53px; backgr ...
In my to-do app, each task has subtasks stored in div elements with p id="task_"+<%=task.id%>I have a form for creating a new subtask on every show page of my project. To understand better, here is the code I am using: This is the show.html.erb fil ...
I'm new to AJAX and have been stuck on the same issue for hours. Here is my script code: <script language='javascript'> function upvote(id ,username) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = fun ...
I need help with disabling past dates in an HTML date input field. Even though I am able to restrict selecting past dates on the date picker, I can still save data if I manually type in a previous date (e.g., 12/08/2020). $(document).ready(function() { ...
My current issue involves a +/- quantity feature that is functioning correctly, but when integrated into a loop, the quantity amounts duplicate for each input field when the +/- buttons are clicked - please refer to the attached screenshot below. Screensh ...
I am looking to implement a feature where an image can be downloaded to my server using node js when a button is clicked by the client. I have successfully implemented the backend function, but I am unsure about how to achieve this on the front end. Below ...
I am looking to pass multiple values from the view to the controller using JavaScript based on the dropdown selection. Below are my code snippets: <select name="class" id="class"> <option selected value='-1'>--Select Class--</o ...
I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...
function onLoad() { eworkData.FieldByName('SearchReference').HTMLfield.onkeydown=function(evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if( keyCode == 13 ) { eworkDat ...
I have multiple articles and blogs on one page that I want to display as a list of titles on another page under the heading "Check Out My Latest Blogs". My goal is to extract all the div elements with a specific class from a particular page and showcase t ...
I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position. However, I've encountered som ...
Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...
I have recently updated to the latest version of Bootstrap: "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "bootstrap": "^4.0.0-beta.2", "core-js": "^2.4.1", "jquery": "^3.2.1", "popper.js": "^1.12.9", As part of this update, I incorporated a navbar: &l ...
I am in the process of developing a website and using the Locomotive Scroll plugin to ensure a smooth scrolling experience. The plugin is functioning well, but I am facing an issue with implementing a fixed header (top menu) that has the usual reduced heig ...