Styling data from database inserted into select box on form

Hi all,

I'm still very new to chronoforms and to this forum. Might be a little slow here because this is still something very new to me. Hope to get some help here. Thanks for viewing.

Currently, I'm having the following code:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <select class="cf_inputbox validate-selection"
        id="cid" size="1" name="cid">
      <option value=''>Add your product to a Category</option>
<?php
if (!$mainframe->isSite() ) {return;}
$db =& JFactory::getDBO();
$query = "
  SELECT cid, name
    FROM catalog
";
$db->setQuery($query);
$options = $db->loadAssocList();
foreach ( $options as $o ) {
  echo "<option value='".$o[cid]."'>".$o[name]."</option>";
}
?>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>

that gets a lists of categories from catalog table from my database and insert them into a select box on my form.

However, it doesn't have any styling on the values itself(refer to attachment for clearer view)

The list of categories bear both main categories and subcategories. What i'm trying to do here is to set some styling for the parent category. So that the user can clearly see subcategories in each category section instead of all of them bearing the same styling.

Hi gunblaze,

There isn't much that you can reliably do to format drop-down options except to add option group entries. You can do this if you can identify which entries are parents and which are children.

A better solution might be to use a double-drop down so that the first selects a category and the second changes to display the corresponding sub-categories.

Bob

Hi bob, Thanks for the reply. I think i will analyse how i will go with the better solution suggested here.