I am looking to extract all select options that do not have an empty value and duplicate them whenever there is a change

Is it possible to clone all select options without an empty value when the change event occurs?

Here is the code I have written:

 $(function() {
        $("#ddlSecurityQuestions1").change(function() {                     
        var index = $(this).val();
        $('#ddlSecurityQuestions2').empty();           
        $('#ddlSecurityQuestions1 option').clone().appendTo('#ddlSecurityQuestions2');            
        var otherDropDown=document.getElementById('ddlSecurityQuestions2');            
         otherDropDown.options.remove(index);             
      });
  });

Answer №1

Give this a shot:

$("#dropdownSecurityQs").on('change', function () {

    var $selections = $(this).find('option').filter(function () {
        return this.value !== '';
    }).clone();

    $('#dropdownSecurityAs').empty();
    $selections.appendTo('#dropdownSecurityAs');
});

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

How to toggle the visibility of a div on click using React hooks

I am looking to achieve a similar effect as shown in the images linked below. Click on a div to make it disappear, and then reappear the previously disappeared div. Check out the before click image (before onclick) and after click image (after oncilck). B ...

Remove webpack functions from the bundle

After following a comprehensive tutorial on bundling files with webpack and some additional online research, I successfully created a configuration file that organizes the modules in my library into the specified structure: dist/node/weather.min.js dist/we ...

Identify Unintended Javascript Modifications in Ajax Request

We have developed a unique Javascript file for our clients to utilize. This innovative snippet captures a screenshot of the website it is executed on and then securely transmits it back to our server using jQuery.post() Given the sensitive nature of our i ...

In Safari, Angular 6 fails to display data points when a component is routed to the d3/event-drops

After creating a test app to replicate the current issue, I have come across an interesting problem. Here is the link to the codebase: https://github.com/mohammadfarooqi/event-drops-d3-test-app. You can also view a sample demo deployed (recommended in saf ...

Canvas connectives (HTML5)

I have successfully implemented a user interface, but I am experiencing lower FPS during certain moments. After conducting a performance test with Firefox, I have realized that these FPS drops occur when the browser re-calculates CSS. The CSS recalculatio ...

Typescript error encountered while attempting to fetch repository from Redis OM

I'm currently working on developing a shopping cart system with the use of expressjs, typescript, and redis OM for the in-memory database. As I created a schema using Redis OM, I encountered an error The error message says: 'Property 'fetc ...

Convert the JSON/YAML data to a correct format in JavaScript

I am in search of a solution to get Google Maps suggestions. Unfortunately, the official geocoding API does not provide real suggestions, only geocoding. Currently, there are two versions available: http://maps.google.de/maps/suggest?q=test&cp=1& ...

Get data from Node server side using synchronous Ajax post method

I've been working on an application that involves making a synchronous ajax POST call to the node server side when the window.unload event is triggered. Here's the code snippet: $(window).on('unload', function() { console ...

Webpack error persists despite successful npm installation

I have been using node-fetch in my nodejs code to fetch data from an API. However, when I attempt to build using webpack, the console displays the following errors: ERROR in ./node_modules/node-fetch/src/request.js Module not found: Error: Can't resol ...

Issue with Bootstrap 4: Dropdowns not functioning properly

Trying to create a dropdown menu using Bootstrap 4 in my Spring MVC Application, along with Thymeleaf template engine. I've included popper.js and jQuery on my HTML page and also added Bootstrap's CSS and JavaScript files to the static directory. ...

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

Is there a way to initiate a background fade-in once an animation has finished?

I have customized the background of the parent element called "banner". Is there a way to smoothly fade in this background after the child elements "block" and "block2" finish animating and reveal the underlying text? <section id="banner"> &l ...

Does JavaScript have an event handler called "onPageRendered"?

I am currently working on a JavaScript program that should start running when my HTML page is loaded. However, I am facing an issue where the initial message does not appear as expected on the page. Upon reviewing the code, I noticed that all the DOM updat ...

Having issues with rendering in Next JS app following deletion function

After successful testing on my local environment, I encountered strange behavior when the code was pushed to the main branch and deployed on Vercel with a Postgres DB. While creating projects and skills worked without any issues, deleting items resulted in ...

To locate all input elements excluding those that are direct descendants of a div, utilize jQuery

Currently, I am in the process of developing a validation jQuery plugin. To accomplish this task, I am required to locate all input elements within a designated container identified by an attribute. However, it is important to note that this main container ...

stop unauthorized entry to the jquery post URL

I have a jQuery script that sends data to a .php script using post or get methods. However, I want to prevent direct access to the PHP script. If a user looks at the HTML source code, they could potentially access the PHP script by copying the URL from ...

Shop of Chocolate in Magento

We are in the process of setting up a Magento chocolate store. Our main hurdle is figuring out how to integrate a feature that allows users to select different sizes of chocolate boxes (4 piece, 9 piece, etc.) and have the selected product added directly t ...

Retrieved information from Firestore to set as the initial value for my useState hook, but I keep receiving an undefined value

I'm facing an issue where I want to use the fetched data from Firestore as the initial value of my state using useState, but it always returns undefined. This is because when updating a user profile, I need to know which property has been edited or up ...

Exploring NgMap and Heatmap functionality with dynamically loaded data

I'm struggling to integrate NgMaps with Heatmaps from the Google Maps API. When I load the data from a script tag, everything works smoothly, similar to the NgMap example. However, if I attempt to create the data array locally, it fails and throws a ...

The bootstrap modal appeared briefly before disappearing unexpectedly

I seem to have encountered an issue with my Jquery Datatables and modal buttons. Whenever I click a button that is linked to a modal for confirmation, the modal briefly appears but then disappears without allowing me to confirm the action. The strange thin ...