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

Refresh Layers in Openlayers with LayerRedraw(), Rotate Features, and Manipulate Linestring Coordinates

TLDR: I am facing difficulties with my OpenLayers map. Specifically, I want to remove and add a layer called 'track', or find a way to plot a triangle based on one set of coordinates and a heading (see below). In my OpenLayers map, there is an i ...

javascriptjqueryjsonextjsopenlayers

What is the reason behind Firefox's disregard of CSS font-size for code tags within pre tags?

There seems to be a discrepancy in how different browsers on Mac OS X 10.11.4 handle font-size. Is this an issue with Firefox, a CSS bug, or am I missing something about CSS? Here's a JSFiddle where you can see the details. In a section like this: &l ...

htmlcssfirefoxfonts

Troubleshooting issues with the sidebar navigation in Laravel project using Vue and AdminLTE

I successfully installed AminLte v3 via npm in my Laravel + vue project and everything is functioning properly. However, I am facing an issue when I attempt to click on the main menu item in the Side navbar that is labeled as <li class="nav-item has-tr ...

javascriptcsslaravelvue.jsadminlte

Displaying JavaScript - Nothing to Echo in PHP

Using PHP to echo a JavaScript block, I have encountered an error message. echo "<script language='javascript' type='text/javascript'> jQuery(document).ready(function($){ var $lg = $('#mydiv'); ...

javascriptphpjquery

The screen reader is unable to interpret the text that is visible within the anchor tag

I have an Angular application with a dropdown menu implemented as shown below. When using the NVDA screen reader to navigate, only the content inside the aria-label attribute is being read when tab focused. However, I want it to also read the content (&ap ...

htmlaccessibilityanchorscreen-readers

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

htmlcssreactjsmaterial-ui

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

send data to a hyperlink

I need to pass a parameter to the href based on the first name in the list. The names are links to another page that I retrieve via an _id passed in the URL. The issue I am facing is that the id is not being passed to the URL, resulting in an error. How ...

javascripthtmlnode.jsexpress

Substitute link with asynchronous JavaScript and XML

I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...

javascriptjqueryhtmlajaxanchor

My goal is to utilize React JS to generate a table by sending the values through props using an array of objects

I have experience building tables as part of various projects, but I am facing challenges creating a table based on the provided format for this specific project. My goal is to utilize the RecordTable Component, render the table component, pass the row com ...

javascriptjqueryreactjsajaxreact-native

The 'e.handler.apply' function is not recognized in the jQuery table sorting library

When using JQUERY tablesorter in one of my applications, I encounter an error while sorting with any of the columns. The error message reads: "Error : 'e.handler.apply' is not function in Jquery.js". Can anyone shed some light on why this is happ ...

jquerytablesorter

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

javascriptjqueryhtmlangularjs

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

Can one button be clicked to trigger the activation of another button through a click?

Just as the title suggests, I am wondering how to make this happen? Any guidance would be greatly appreciated! $('.notVisible').click (function(){ alert("I'm the invisible button") }); $('.visible').click (function(){ al ...

javascriptjquery

Display XML elements on hover with a Bootstrap tooltip

I am attempting to showcase an XML snippet in my title attribute, similar to the example below. I understand that removing data-html="true" or changing it to false will resolve the issue. However, I also require a label in my title resembling the <stro ...

jqueryhtmlcsstwitter-bootstrap-3twitter-bootstrap-tooltip

How can you integrate jquery ajax in WordPress?

Recently, I started learning about jquery and have been following a tutorial on creating instant search using jquery. The tutorial can be found here. Now, I am trying to implement this on my WordPress site, but it seems like things work differently when d ...

javascriptphpjqueryajaxwordpress

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

What are the differences in how a link tag responds on mobile devices?

I have a question regarding opening a pdf in an iframe on the current page. Is there a way to handle this differently for mobile/tablet users? For example, clicking the link could open it in another tab for better readability instead of within the iframe ...

javascriptjqueryhtml

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

JavaScript's setAttribute function is not functioning as expected

I have been using the setAttribue method as shown below. It works perfectly for the first instance, but after that, when I try to change the value, it displays an alert without updating with document.getElementById("to").setAttribute("value", selValue); d ...

javascripthtml