Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Question

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Could someone please assist me in resolving this issue?

I am looking for a dual listbox with single select option, unlike Bootstrap which only offers dual listboxes with single/multiple select.

To Clarify:

Here is an example:

In my dual listbox, the left listbox has 5 options. I want to enable single select. This means that when I click on an option in the left listbox, a popup (alert) should appear displaying the corresponding field values. The popup will also include Add and Cancel buttons to add or cancel the values respectively. Upon clicking Add in the popup, the selected value will be added to the right listbox.

If I select an option in the right listbox, another popup (alert) should appear showing the respective field values. This popup will have Delete and Cancel buttons to delete or cancel the values in the right listbox.

I would greatly appreciate it if anyone could provide a solution to this problem.

Thank you,

jquery html twitter-bootstrap css listbox

Answer 1

Answer №1

//HTML
<select id="sel1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="sel2"></select>
//JavaScript functionality
//When the first select changes
$('#sel1').on('change', function (e) {
    e.preventDefault();
    var selVal = $(this).val();
    var selHtml = $(this).find('option:selected').text();
    moveItem('#sel1', '#sel2', selVal, selHtml);//invoke the moveItem function
});
//When the second select changes
$('#sel2').on('change', function (e) {
    e.preventDefault();
    var selVal = $(this).val();
    var selHtml = $(this).find('option:selected').text();
    moveItem('#sel2', '#sel1', selVal, selHtml);//invoke the moveItem function
});
//The moveItem function takes 4 parameters
function moveItem(moveFrom, moveTo, selVal, selHtml) {
    if (confirm("Are you sure? : " + selVal)) {//Confirmation dialog box appears and upon selecting 'ok' this section will execute
        $(moveTo).append('<option value="' + selVal + '">' + selHtml + '</option>');//add a value to the select element
        var mId = moveFrom + ' option[value="' + selVal + '"]';
        $(mId).remove();//remove the value from the other select element
    }
    return false;
}

Answer 2

//HTML
<select id="sel1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="sel2"></select>
//JavaScript functionality
//When the first select changes
$('#sel1').on('change', function (e) {
    e.preventDefault();
    var selVal = $(this).val();
    var selHtml = $(this).find('option:selected').text();
    moveItem('#sel1', '#sel2', selVal, selHtml);//invoke the moveItem function
});
//When the second select changes
$('#sel2').on('change', function (e) {
    e.preventDefault();
    var selVal = $(this).val();
    var selHtml = $(this).find('option:selected').text();
    moveItem('#sel2', '#sel1', selVal, selHtml);//invoke the moveItem function
});
//The moveItem function takes 4 parameters
function moveItem(moveFrom, moveTo, selVal, selHtml) {
    if (confirm("Are you sure? : " + selVal)) {//Confirmation dialog box appears and upon selecting 'ok' this section will execute
        $(moveTo).append('<option value="' + selVal + '">' + selHtml + '</option>');//add a value to the select element
        var mId = moveFrom + ' option[value="' + selVal + '"]';
        $(mId).remove();//remove the value from the other select element
    }
    return false;
}

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Answer №1

Similar questions

HTML or JS/jQuery can create disorienting cursor behaviors

Which one has better performance: class or CssClass?

Having difficulty styling scrollbars using CSS

Sending data as a string in an AJAX request

Adjust the CSS of the currently dragged item using jQuery sortable

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Menu is not functioning properly as it is not staying fixed in place

Show the Table and Conceal the Overflow

Javascript conditional testing

Checkbox paired with a read-only text column

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Error encountered: SyntaxError - Missing semicolon before statement in AJAX call while processing JSON data

Columns with adjustable widths

Having numerous calls to isNaN within a JavaScript if-else statement

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Navigating through history using the pushState method and incorporating back and forward buttons

Instructions for converting a readonly text field into an editable one using JavaScript

Flexbox Alignment Problem with Mixed Text and Image Elements

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

Tips for displaying HTML content within a column using aoColumns