transfer the output from the second selection to the adjacent div

Question

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen.

Here is the code I have so far:

https://jsfiddle.net/hxe7wr65/

Is there a way to achieve this? I don't want the selected result to display in the box, but rather be moved to another location while keeping the original box empty with the placeholder visible at all times.

The current design I'm working on looks like this:

https://i.sstatic.net/Em3PN.png

In the image above, only one option can be selected. Once selected, the result should appear elsewhere while the select box retains its placeholder text. Your assistance would be greatly appreciated. Thank you!

javascript jquery html css jquery-select2

Answer 1

Answer №1

It seems like you may be trying to retrieve the value of the last selected item, move it to another div, and then clear the input field. To achieve this, you need to first attach an event handler.

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    console.log('select')
    console.log(e.params.data.id) //Retrieve the id of the selected attribute
    console.log(e.params.data.text) //Get the text of the selected item
})

Once you have captured the value, transferring it to the other div is a straightforward process.

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text;
    $("#otherdiv").append(text);
})

Finally, to reset the form:

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text;
    $("#otherdiv").append(text);
    $(this).val('');
    // or with older versions
    $(this).select2('val', '')
})

Answer 2

It seems like you may be trying to retrieve the value of the last selected item, move it to another div, and then clear the input field. To achieve this, you need to first attach an event handler.

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    console.log('select')
    console.log(e.params.data.id) //Retrieve the id of the selected attribute
    console.log(e.params.data.text) //Get the text of the selected item
})

Once you have captured the value, transferring it to the other div is a straightforward process.

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text;
    $("#otherdiv").append(text);
})

Finally, to reset the form:

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text;
    $("#otherdiv").append(text);
    $(this).val('');
    // or with older versions
    $(this).select2('val', '')
})

transfer the output from the second selection to the adjacent div

Answer №1

Similar questions

Unable to transmit an object containing a property that includes an array of other objects

Can you provide some guidance on accessing HTTP headers while using Promises to make AJAX requests?

Custom Pug design without any CSS files added

Incorporating a teaser of a webpage into an <a> tag linking directly to the page

Adjust the checked state of the checkbox based on the outcome of the promise's data

Guide on sending files and data simultaneously from Angular to .NET Core

Leveraging ACE in conjunction with WT

Exploring the implementation of a many-to-many relationship on a webpage

Steps for populating a dropdown list with a JSON response

Manipulating arrays of objects with handlebars.js

New feature alert! Introducing the Mentio JS menu now available at the bottom of the webpage

Update a Div automatically without causing it to scroll back to the beginning of the Div

Responsive Font Sizing in React Native

The intricate dance between JAVA and HTML

React material-ui responsive carousel is a versatile tool that allows for

Encountering a Microsoft error while trying to install jsdom with node.js

Change the button text without the need for a click, automatically switch

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Cannot see the box-shadow with :before and z-index in CSS

Avoiding Memory Leaks and Managing JS Heap Size While Polling Large Amounts of Data Every 5 Seconds with Vuex