CODEWITHSUNDEEP
phpsmarty
udexter
udexter

Reputation: 2347

Reproduce a option group of 3 levels with smarty

In a recent project I have found that they're using smarty and the client needs a option group of 3 levels. I've never used smarty and I find this particular case a little hard to do it from scratch.

I need to do the next but with smarty:

<select>
    <optgroup label="Level One"></optgroup>
        <optgroup label="Level Two" style="padding-left:15px"></optgroup>
            <option style="padding-left:30px"> A.B.1 </option>    
        <optgroup label="Level Two" style="padding-left:15px"></optgroup>
            <option style="padding-left:30px"> A.B.2 </option>
    <optgroup label="Level One"></optgroup>
        <optgroup label="Level Two" style="padding-left:15px"></optgroup>
            <option style="padding-left:30px"> A.B.1 </option>    
        <optgroup label="Level Two" style="padding-left:15px"></optgroup>
        <option style="padding-left:30px"> A.B.2 </option>    
</select>

I would also want to know what is the best way to inform this smarty; with an array of 3 levels or how (I'm using PHP) and if I have a default option how I've to indicate it.

Thank you in advance!

Update: code actually using

$arr['Sport'] = array(6 => 'Golf', 9 => 'Cricket',7 => 'Swim');
$arr['Rest']  = array(3 => 'Sauna',1 => 'Massage', "Test" => array(10 => 'Other', 11 => 'Option'));

$smarty->assign('lookups', $arr);
$smarty->assign('fav', 7);

This actually is giving me only 2 levels.

Update 2

enter image description here enter image description here

Upvotes: 2

Views: 1320

Answers (1)

rodneyrehm
rodneyrehm

Reputation: 13557

Have a look at {html_options}.

edit

Smarty3 Template

{$options = [
  "Level1 - 1st" => [
    "Level2 - 1st" => "Level2 - 1st",
    "Level2 - 2nd" => ["Hello", "World"]
  ],
  "Level1 - 2nd" => [
    "Level2 - 3rd" => "Level2 - 3rd",
    "Level2 - 4th" => ["Hello" => "Hello", "other", "World"]
  ]
]}

<select>{html_options options=$options}</select>

generates the following HTML (manually indented)

<select>
  <optgroup label="Level1 - 1st">
    <option value="Level2 - 1st">Level2 - 1st</option>
    <optgroup label="Level2 - 2nd">
      <option value="0">Hello</option>
      <option value="1">World</option>
    </optgroup>
  </optgroup>
  <optgroup label="Level1 - 2nd">
    <option value="Level2 - 3rd">Level2 - 3rd</option>
    <optgroup label="Level2 - 4th">
      <option value="Hello">Hello</option>
      <option value="0">other</option>
      <option value="1">World</option>
    </optgroup>
  </optgroup>
</select>

Which loooks pretty much like one would expect. But viewing this in Firefox 7, I see the properly nested groups being displayed on the same level:

opened select

Upvotes: 1

Related Questions