Jump to content
  • 0

multi-select Listbox Unselect


Petra001
 Share

Question

3 answers to this question

Recommended Posts

  • 1

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 :)

Link to comment
Share on other sites

  • 1

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>

 

Link to comment
Share on other sites

  • 1
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...