Select - how to have a 'hidden' or 'disabled' option value?

Bootstrap Studio Help
1

Hi,

I'm trying to do the typical "Please Select" for the defaulted option value in a select that is not selectable/disabled after the user makes a choice and only the acceptable options are.

How can this by done in Bootstrapstudio?

Thanks! Lars

2

Do you mean when you get to the form you see "Please Select" then when you click it and select something but then click it again to select "Please Select" again, it pops up a warning/prompt that you need to pick something else.

If that is the case then it is something that Javascript would do it's not something actually related to the BSS app. But you can use the script editor to write the JS code for it.

It might be simpler to have a "required" flag on the Select element that when you try to submit the form it prompts that you need to select an item from the list.

To do that second choice in the app its pretty easy.

Your first option must be an option that has nothing for it's value. For example:

  1. So first you drag and drop the select element to your project
  2. then select the Select element in the Layout View pane
  3. top right of the BSS app is the Options pane click on the pencil icon for "This is a group"
  4. scroll down so you can change TYPE from Option Group to Option
  5. change label from "This is a group" to "Please Select"
  6. click "Selected" so it has a checkmark in the box
  7. click "SAVE ITEM"
  8. click on the pencil icon for "This is item 1"
  9. scroll down and click "Selected" so it removes the checkmark in the box
  10. click "SAVE ITEM"
  11. scroll down and click "Required" so it has a checkmark in the box

You can set pretty much any form input element to be required and the form won't submit unless you enter/select a value for the required elements. Unless they have a web browser that doesn't support the Required flag. Most if not all modern browsers do support it. If it is support and the input has the Required flag the user will get a little tooltip prompt to enter/select a value.

Saj

3

Saj-

Thanks very much, so this works and was what I was looking for. Is there a way to have the first option (Ie "Please Select" be disabled?).

I'm validating currently (in testing) with http://1000hz.github.io/bootstrap-validator (though right now trying to figure out how to successfully call this on a 'multi-page' form using addClass/removeClass of 'hidden' <though have read all about the issues w/ the !important styling in .hidden css of display:none; and how this basically breaks jQuery effects which I really need).

The validation IS working correctly- since there is no option value for "Please Select" - but ideally I'd like this to be the default selected/shown element BUT after a user clicks on it they are unable to re-select the "Please Select" option again.

Any way to do this natively in 'Studio?

Have read a lot of your comments here - greatly appreciate you taking the time to reply!

Best, Lars

4

Ok, so I did a little more testing and you can disable individual options.

So following my above instructions for the select setup, also do this.

  1. Layout View select the selectbox (i.e. Please Select wording)
  2. click on the HTML pane to expand it
  3. select the Option element for "Please Select"
  4. click the ATTRIBUTES pane below to expand it
  5. click the Plus Icon to add a custom attribute
  6. in the first box type "disabled"
  7. click APPLY button

This will still show the Please Select option when you first get to the form. When you select something it makes it so that you can not go back and re-select the Please Select option. It does not remove the option just makes it so that you can't re-select it. To do something like remove it you have to use Javascript for that.

Saj

5

WONDERFUL! Thank you.

Exactly what I was looking for - didn't realize you can ADD attributes. This was fairly limiting but just realized I didn't get the interface.

Have a great day Saj.

6

You're welcome :)

Saj