Show hide option in select on condition

Wappler General Need Help
1

How do I show the option on the condition the appropriate text.value===1

image

2

Can you be a bit more detailed in what you are trying to do? It’s not very clear.

Also in your screenshot that form won’t do anything as you don’t have the form elements inside a form.

3

Hey @JBM,

In addition to @brad’s note I would like to ask 2 questions:

  1. Are your data contained in the option sensitive? You just need the user to not have this option available or there are data that shouldn’t be rendered in your page at all?
    Be aware that show/hide attributes just set a display:none css rule but the data are rendered and can be foynd in dev tools…
  2. Since you are talking about condition it means that your data are not static (hand coded) and come from a source (api, query, json etc…)
    In this case there will be one option only inside your select , with a repeat expression (source).
4

Hi Brad
I have a query which selects a single record which has 3 fields zoom, call, meet.
I want to be able to put into a select the fields which have a the value of 1.

ie if the records field has zoom ==1, call==0, meet==1

I want a select to display the text field ‘zoom’ and the text field ‘meet’

5

Hi famousmag,

  1. No the data is not sensitive.
  2. Not sure what your question is but I want to provide a select as described to brad above.

I have done this previously with javascript which would be triggered on show of a modal but it was never reliable even with wait states of 500ms. Hence my attempt to do it within the select itself.

6

OK, got it…

I give you a quick sample of select option based on what you told us…

2_Option
2_Option1615×442 70.6 KB

<select id="select1" class="form-select mt-3">

                        <option dmx-bind:value="srvc_CatList.data.qr_Cat_List[0].cat_id" dmx-text="srvc_CatList.data.qr_Cat_List[0].cat_name" dmx-show="srvc_CatList.data.qr_Cat_List[0].cat_id&gt;2">opt</option>

                        <option dmx-bind:value="srvc_CatList.data.qr_Cat_List[1].cat_id" dmx-text="srvc_CatList.data.qr_Cat_List[1].cat_name" dmx-show="srvc_CatList.data.qr_Cat_List[1].cat_id&gt;2">opt</option>

                        <option dmx-bind:value="srvc_CatList.data.qr_Cat_List[2].cat_id" dmx-text="srvc_CatList.data.qr_Cat_List[2].cat_name" dmx-show="srvc_CatList.data.qr_Cat_List[2].cat_id&gt;2">opt</option>

                        <option dmx-bind:value="srvc_CatList.data.qr_Cat_List[3].cat_id" dmx-text="srvc_CatList.data.qr_Cat_List[3].cat_name" dmx-show="srvc_CatList.data.qr_Cat_List[3].cat_id&gt;2">opt</option>

                    </select>

Select has no datasource.
Inside the select you insert 3 options without static value attribute, but you assign the following dynamic attributes on each of them:

  • Value
  • Inner Text
  • Show

Of course you have to change the conditions and the data bindings to match your project

And here is the result:

3_Result
3_Result661×501 46.3 KB

(options that has id<2 are not listed)

If you need help please show as your query and form code

7

Just in case you were confused of my select example…

<select id="select1" class="form-select mt-3">
    <option dmx-bind:value="a" dmx-show="yourQuery.zoomField==1">Zoom</option>
    <option dmx-bind:value="b" dmx-show="yourQuery.callField==1">Call</option>
    <option dmx-bind:value="c" dmx-show="yourQuery.meetField==1">Meet</option>
</select>

I don’t know if the option’s value is important…

1 Like
8

Thank you SOOO much famousmag.
Works perfectly!

Looks so simple and obvious when you see it.
Been trying to work this one out for ages.

Thanks again :+1: :smile:

1 Like
9

Not sure if a select field is what you want to use in your case. But you can show and hide select options using the show and hide dynamic attribute on each option.

On holidays today and not at my computer but I hope that helps you understand where to look.

10

Thanks Brad all sorted using dmx-show. Enjoy your holiday :+1:

1 Like