multi-select Listbox Unselect

[Petra001]

Any recommendations on how I can achieve this? the unselect list box of multi select.

Help me my old problem....

[GoodBoy]

Hello @Petra001, you might want to try this solution for the submission form.

 

First, add an HTML block beside your listbox and paste this code. This will be the button link to clear all the options you select in the listbox.

<a href="#" onclick="clearSelected();">Clear</a>

 

Then, paste this code in your Footer. You may disregard the script tag if you already have a code in your Footer. FIELDNAME should be the name of your listbox.

<script>

function clearSelected(){
    var elements = document.getElementById("InsertRecordFIELDNAME").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }
  
</script>

 

I just use this article as reference for this solution: https://stackoverflow.com/questions/12802739/deselect-selected-options-in-select-menu-with-multiple-and-optgroups

Here is a sample output as well: https://c0hcv332.caspio.com/dp/3b43900075840456488c405a9945 

[GoodBoy]

Additionally, if you are using an Update DataPage. You can just change the InsertRecordFIELDNAME to EditRecordFIELDNAME inside the Footer code. Like this:

<script>
function clearSelected(){
    var elements = document.getElementById("EditRecordFIELDNAME").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }
</script>

 

[GoodBoy]

On 11/17/2021 at 9:12 AM, GoodBoy said:

Hello @Petra001, you might want to try this solution for the submission form.

 

First, add an HTML block beside your listbox and paste this code. This will be the button link to clear all the options you select in the listbox.

<a href="#" onclick="clearSelected();">Clear</a>

 

Then, paste this code in your Footer. You may disregard the script tag if you already have a code in your Footer. FIELDNAME should be the name of your listbox.

<script>

function clearSelected(){
    var elements = document.getElementById("InsertRecordFIELDNAME").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }
  
</script>

 

I just use this article as reference for this solution: https://stackoverflow.com/questions/12802739/deselect-selected-options-in-select-menu-with-multiple-and-optgroups

Here is a sample output as well: https://c0hcv332.caspio.com/dp/3b43900075840456488c405a9945 

Additionally, if you would like to have a 'Select All' button, then it just has the same workflow as deselecting the options.

Just add this below the first code in your HTML block.

<a href="#" onclick="allSelected();">Select All</a>

 

Then, insert this in your Footer as well.

<script>
function allSelected(){
    var elements = document.getElementById("InsertRecordFIELDNAME").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = true;
    }
  }
</script>

 

Just disregard the script tag if you already have it. Hope this helps!

[GoodBoy]

Hello! Just updating this thread, if you want to select multiple options without having to hold the CTRL button on your keyboard. Then you may insert this code in your Footer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);
    
    return false;
});
</script>