Search code examples
phphtmloptgroup

Multidimensional <optgroup> and <option> with duplicate option values for each optgroup


I should be able to get this, but I think the current pandemic 'distancing' has fried my brain. I'm also wondering if it's even possible. I've looked at other questions similar to this (like optgroup with all option), but they either didn't have an answer or I couldn't understand or replicate them.

I have an array I've built from mysql results: $skillArray[$row->disciplinename][$row->skillid] = strtoupper($row->skillname); Now I'm trying to build a 'select' with optgroups for each $row->disciplinename. Within each optgroup, the $row->skillid is unique, but if the user does not select a specific "disciplinename", the dropdown results show every '$row->skillid' value -- which it does so far, and that's ok. The field '$selJobSkill' is whatever they may select from the dropdown. The field '$skill' is simply a name associated with $skillId. Here is the 'select' dropdown:

<select name="jobskill" id="jobskill" class="textfield" onchange="submit()">
                        <option value="0">(choose)</option>
                        <?php
                        foreach ($skillArray as $catname=>$cat) {
                            echo '<optgroup label="' . $this->catname . '">';
                            foreach ($cat as $skillID => $skill) {

                                $selected = ($skillID == $selJobSkill) ? ' selected' : ''; ?>
                                <option value="<?php echo $skillID; ?>" 
                                <?php echo $selected; ?>><?php echo $skill; ?></option>
                        <?php
                            }
                        }
                        echo "</optgroup>";
                        ?>
                    </select>
        

An example of the array is :

 ( [Health] => Array ( [1] => COTA [2] => OT [3] => PT [4] => PTA [5] => SLP [6] => MGMT [7] => DPT )
 [Tech] => Array ( [1] => RESP_TECH [2] => RESP_THERA [3] => PHARM_TECH [4] => US_TECH [5] => CT/MRI [6] => SURG_TECH [7] => RAD_TECH [8] => CLS [11] => SCRUB_TECH ) ) 

First issue is that I'm not getting the optgroup name - I'm getting a blank entry. Neither '$cat' nor '$catname' show up. Second issue is that they want to be able to get a particular skillid associated with a disciplinename even if they don't select a disciplinename (it's in another dropdown, and the default is 'All'). Within each 'disciplinename', there is a 'skillid' and I'm tasked with finding a way to create this dropdown based on 'disciplinename' (as an optgroup) and then if the user chooses a skillid from the dropdown WITHOUT choosing a 'disciplinename', I'm supposed to mark the skilled for that disciplinename as the selected one. Is this even possible with this kind of 'select' dropdown'?


Solution

  • A day or two away from this, and I realized the problems and the fix. First, I was not building the array correctly from the database results. The fix for that was: $this->model->skillArray[$row->classid .'-'.$row->disciplinename][] = array( $row->skillid => $row->skillname );

    The second thing was that I wasn't accessing the array correctly. I knew one or both of these things were causing the issue, but late nights and whatever ... you've all been there. The fix for accessing the array was:

    foreach ($this->model->skillArray as $key => $cat) {
            echo '<optgroup label="' . substr($key, 2) . '">';
            foreach ($cat as $skillset => $skill) {
                    foreach ($skill as $skillId => $skillname) {
                        echo "<option data-cat='$key' value='$skillId'>" .  $skillname . "</option>";
                    }
            }
            echo "</optgroup>";
    }
    

    I wasn't going deep enough into the array to pull out the values. I like suggestion of @IVO GELOV but decided to use HTML5 "data-" attributes with the '<option' tags. I have the numerical representation of 'Health' and 'Tech' concatenated as you can see in the build of the array. Now I can just pull this stuff out with javascript/jquery. It works for me. It may look squirrely but I've seen stranger things. It works.