Jump to content
  • 0

Limit Certain Selections in List Box


kpcollier
 Share

Question

I have a multi-select list box. This is used for configuring what type of glass shower you want. Most of these selections can work together - but there are a few combinations that I would like to limit the user from selecting.

What is the best way to 'grey out' a selection based on already selected values in a list box?

The Multi-Select Listbox field name is Shower_Layout, with the following options:

Inline, Door Only, Door And Panel, Door + Multiple Panels, 90 Degree Return, Other Degree Return, Step Up/Notch, and Transom. 

In example, if the user first selects 90 Degree Return, I would like the 'Door Only' and 'Inline' to be non-selectable.  I tried with JS, but I couldn't get anything to work. I need a little kickstart, please!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Hello @kpcollier
I think that the better idea will be to use Cascading to restrict the amount of values you get in multi-select list box.
You can check this article to get familiar with this feature - https://howto.caspio.com/datapages/datapage-components/cascading-elements/

You can use virtual field to  define to category. Then you may use this field as the parent field to get appropriate set of options in multi-select list box.

Link to comment
Share on other sites

  • 0
6 hours ago, Andrew said:

I think that the better idea will be to use Cascading to restrict the amount of values you get in multi-select list box.

I don't believe you can use cascading with a multi-select list box datatype. And, with regular list box, the multi select feature isn't included in Submission forms. I should have mentioned that I was using a sub form.

Link to comment
Share on other sites

  • 0

You can use cascading with list-box.

To implement the multi-select use this code in the header of the datapage:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 document.querySelector('select[name="name_of_your_select_field"]').setAttribute('multiple', 'multiple');
});
</script>

You can check the name of select using the DevTools of a browser you use.

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...