Categories with parents

Hey,

I'm trying to create a form that manage a bit different 'categories'.
The idea is that people have 2 fields (a normal text and a drop down)

New category: <insert-name>
Parent category: <display current categories with structure>

To give an example, this should be something like:

New category: test
Parent category: Top
                            Category 1
                                 subcategory 2
                             Cat...

You can compare it best with the structure of joomla itself when you want to add category or so...

Hi brononius,

And what is your question?

Bob

Oops, forget that sentence... 😶

I was wondering if I could also make the drop down so flashy as the dropdown in joomla.
That you can see the 'structure' of the categories in the dropdown.

Hi Brononius,

The simple answer is that Joomla! adds dashes in front of the options to do the indenting (see the code sample below).

The complicated answer is that they appear to use a Joomla!+Bootstrap JavaScript driven select drop-down element to show the list. I'm not sure how that works but it might be a standard Joomla! form element.

Bob

Here's the code, or at least the HTML part:

<div class="control-group"><div class="control-label">
  <label id="jform_parent_id-lbl" for="jform_parent_id" class="hasTooltip" title="" data-original-title="<strong>Parent</strong><br />Select a Parent Category" aria-invalid="false">Parent</label>
</div>
<div class="controls">
  <select id="jform_parent_id" name="jform[parent_id]" class="chzn-done" style="display: none;">
    <option value="1" selected="selected">- No parent</option>
    <option value="2">- Uncategorised</option>
    <option value="11">- French</option>
    <option value="12">- English</option>
    <option value="13">- Pets</option>
    <option value="14">- - Cats</option>
    <option value="15">- - Dogs</option>
    <option value="16">- - - Big dogs</option>
    <option value="17">- - - Small dogs</option>
  </select>
  <div id="jform_parent_id_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active" style="width: 220px;">
    <a href="javascript:void(0)" class="chzn-single chzn-single-with-drop" tabindex="-1">
      <span>- French</span>
      <div><b></b></div>
    </a>
    <div class="chzn-drop" style="display: block; width: 218px; top: 24px;">
    <div class="chzn-search">
      <input type="text" autocomplete="off" style="width: 183px;">
    </div>
    <ul class="chzn-results">
      <li id="jform_parent_id_chzn_o_0" class="active-result" style="">- No parent</li>
      <li id="jform_parent_id_chzn_o_1" class="active-result" style="">- Uncategorised</li>
      <li id="jform_parent_id_chzn_o_2" class="active-result result-selected" style="">- French</li>
      <li id="jform_parent_id_chzn_o_3" class="active-result" style="">- English</li>
      <li id="jform_parent_id_chzn_o_4" class="active-result" style="">- Pets</li>
      <li id="jform_parent_id_chzn_o_5" class="active-result" style="">- - Cats</li>
      <li id="jform_parent_id_chzn_o_6" class="active-result" style="">- - Dogs</li>
      <li id="jform_parent_id_chzn_o_7" class="active-result" style="">- - - Big dogs</li>
      <li id="jform_parent_id_chzn_o_8" class="active-result" style="">- - - Small dogs</li>
    </ul>
  </div>
</div>

Hmmm, seems to be very complicated (for me)... 😶

I think I'll put this aside for a while, and first build the rest of my idea.
When I've got motivation left (and the site is used), I'll have a deeper look at it....