Choosing and adding a div to another using the select method

Can someone assist me with this task? My goal is to dynamically append a div when selecting an option from a dropdown, and hide the div when the same option is selected again. Additionally, I want the name of the selected option to be displayed on the left side next to the appended div. You can find a demonstration of my code sample on jsfiddle

Below is my HTML code snippet.

<div class="container">
  // HTML code here
</div>

Here is my CSS code snippet. I have set the display property to none for certain elements to control their visibility based on selection status.

.select-input button {
  background-color: #aa1876 !important;
  color: #fff !important;
  padding: 10px 20px;
}

#attribute_show {
  display: none;
}

And here is the JQuery code snippet. It includes Bootstrap-select initialization and handling of select option events.

//JQuery code here

I would greatly appreciate any help with this issue. If you need more clarity on my code, please refer to this link https://jsfiddle.net/innodigita/9Lcq40su/60/

htmljquerycssdrop-down-menubootstrap-select

Answer №1

After reviewing your code, I have made some adjustments. I hope these changes align with the requirements you provided. You can find the updated version in the following fiddle: example

JS

$("#attribute_select").on('changed.bs.select', function(e, clickedIndex, 
isSelected, previousValue) {

var selectedD = $(this).find('option').eq(clickedIndex).text();

if (isSelected) {
  var el = $("#attribute_show").clone();
  var newAttr = '#attribute_show' + count; 
  var html = $(el).appendTo("#attribute_append");
  $(html).removeAttr('id').attr('id', newAttr); // assigning a new ID to the cloned div
  $(html).find(".change-me").text(selectedD);
  count++;
        $(html).find('select.my-select1').selectpicker(); 
        
  } else {
  var selectedItems = $(this).val(); 

  $('#attribute_append').find('span.change-me').each(function(i, e) {
    var item = $(e).text().toLowerCase().trim();
    if (jQuery.inArray(item, selectedItems) == -1) {
      $(e).parent().parent().parent().parent().remove();
    }
  })
}
});

I have included explanations in the fiddle for clarity. Please review and make any necessary edits or comments. There may be alternative methods that others could suggest for improvement.

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

Utilizing BootStrap for a more Dynamic and Reactive Web Design

Here is the HTML code I am using along with bootstrap: <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> & ...

htmlbootstrap-4

Version 2.7.2 of Chart.js now allows users to retrieve the value of a data point by

I need to retrieve the value for each point clicked on, but I am currently only able to get the value of the first line when I click on a point. The GetElementsAtEvent function provides me with an array of 3 active elements, but how can I specifically extr ...

javascriptjquerychartsmomentjs

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

javascripthtmlreactjsjsx

Issue with Wordpress Submenu Items not Displaying

I've included sub menu items in my primary navigation, but they're not visible at all? I've examined the css and haven't found any code that would hide the sub menu. ul.art-hmenu { display: inline-block; vertical-align: midd ...

phpcsswordpress

Managing the URL page through htaccess and retrieving parameters in the index

How can I manage URL page redirection using htaccess and retrieve parameters in the index page without displaying "index" in the URL? For example: 1) Suppose my domain is "papashop.com" 2).htaccess : RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d ...

phphtml.htaccess

Leveraging JQuery for Inserting Data Into mySQL Database

As I delve into JQuery for the first time while working on a project, I realize that this endeavor serves as more of a learning experience rather than a functional one. Currently, I have three PHP files in play: 'connection.php', which establishe ...

phpjquerymysql

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

htmlcss

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

javascriptcsssvg

Prioritize returning AJAX data over iterating through the parent loop

Hey everyone, I'm having trouble wrapping my head around this issue even after researching various scenarios online. Here's what's going on: I have an array of strings named recipientsList. What I want to do is make an AJAX call for each s ...

javascriptjqueryajax

I'm looking to develop a custom CKEditor plug-in that will allow users to easily drag and drop elements within the editor interface

Upon observing that dragging and dropping text or images within a CKEditor editor instance does not trigger the "change" event, I devised a temporary solution by implementing code triggered by the "dragend" event. However, my ultimate goal is to create a C ...

javascriptjqueryckeditor

Incorporate Unicode characters into the structure of an HTML tag

I'm having an issue with the C# script below that is supposed to remove HTML tags from a description column in SSIS. I attempted to include the unicode value &#58 in the htmlTagPattern string, but it's not working as expected. Any help would ...

c#htmlsql-serverssisetl

Issues with animation functionality in Google Chrome

Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...

htmlcssgoogle-chrome

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

javascripthtmlcssbrowser

The homepage is not converting to a different language

Using the WPML plug-in for my WordPress website has been successful in translating most of my pages, but I am running into an issue with the home page. Even though I have manually translated and published the home page, it still does not translate when cli ...

jquerywordpresshtmlwpml

Is there a way to use Jquery to determine if a parent div contains a scroll

I'm trying to find a jQuery example that checks if any parent div has a scroll bar, but I can't seem to locate a helpful one. Here is the code snippet I am working with: <div> <div class="heading"> <div class="visit ...

javascriptjqueryhtmlcss

Steps to modify the servletRequest's content length within a filter

My main objective is to secure the POST body requests sent from my web application to my service by encrypting them. This encryption process takes place within a filter in my system. However, I've encountered an issue related to content length. When ...

javascriptjqueryajaxservletsencryption

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

While attempting to save a csv file by clicking the download csv button on a website, I encountered an issue. It seems that the .click() action is not functioning as expected, and upon inspection, I noticed that the class-name of the button changes from &a ...

pythonhtmlseleniumcsvgoogle-colaboratory

Slide in parts gradually by scrolling up and down, avoiding sudden appearance all at once

I have implemented a slider on my website using jQuery functions. For scrolling down, the following code snippet is used: jQuery("#downClick").click(function() { jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, "slow"); ...

javascriptjqueryjquery-plugins

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

Working on a website layout that features a navbar at the top and a datatable below. However, when hovering over the navbar to reveal subitems, I notice a transparency issue where the navbar overlaps with the datatable. Below is a simplified version of my ...

javascripthtmlcssdatatables-1.10