Error with nested dropdown format

Question

I've got nested dropdown & I get format problems with more than 2 times nested items. Im pretty sure my "Mona Lisa" quality image made in Paint will demonstrate it perfectly.

Im looking for any suggestions what to change about my code to make it work properly.

IMAGE ABOUT MY PROBLEM:

CODE:

          <div class="form-group">
              <label for="p-location"><?php _e( 'Location', 'tt' ); ?></label>
              <select name="p-location" id="p-location" class="form-control required" title="<?php _e( 'Please select the location.', 'tt' ); ?>" data-placeholder="<?php _e( 'Choose a location', 'tt' ); ?>">

                <option value=""></option>
                <?php 
                $locations = get_terms('p-location', array( 'orderby' => 'slug', 'parent' => 0, 'hide_empty' => false) ); 
                if ( isset( $_GET['p_location'] ) ) {
                  $get_location = $_GET['p_location'];
                }
                else {
                  $get_location = '';
                }
                $p_locations = get_the_terms( $p_id , 'p-location' );
                if ( !empty( $p_locations ) ) {
                  foreach ( $p_locations as $p_location ) {
                    $get_location = $p_location->term_id;
                    break;
                  }
                }
                ?>
                <?php foreach ( $locations as $key => $location ) : ?>
                <option value="<?php echo $location->term_id; ?>" <?php selected( $location->term_id, $get_location ); ?>>
                  <?php 
                  echo $location->name;
                  $location2 = get_terms( 'p-location', array( 'orderby' => 'slug', 'parent' => $location->term_id, 'hide_empty' => false ) );
                  if( $location2 ) : 
                  ?>
                  <optgroup>
                    <?php foreach( $location2 as $key => $location2 ) : ?>
                        <option value="<?php echo $location2->term_id; ?>" class="level2" <?php selected( $location2->term_id, $get_location ); ?>>
                          <?php 
                          echo $location2->name;
                          $location3 = get_terms( 'p-location', array( 'orderby' => 'slug', 'parent' => $location2->term_id, 'hide_empty' => false ) );
                          if( $location3 ) : ?>
                          <optgroup>
                            <?php foreach( $location3 as $key => $location3 ) : ?>
                              <option value="<?php echo $location3->term_id; ?>" class="level3" <?php selected( $location3->term_id, $get_location ); ?>>
                              <?php 
                              echo $location3->name;
                              $location4 = get_terms( 'p-location', array( 'orderby' => 'slug', 'parent' => $location3->term_id, 'hide_empty' => false ) );
                              if( $location4 ) :
                              ?>
                              <optgroup>
                                <?php foreach( $location4 as $key => $location4 ) : ?>
                                <option value="<?php echo $location4->term_id; ?>" class="level4" <?php selected( $location4->term_id, $get_location ); ?>>
                                <?php echo $location4->name; ?>
                                </option>
                                <?php endforeach; ?>
                              </optgroup>
                              <?php endif; ?>
                              </option>
                            <?php endforeach; ?>
                          </optgroup>
                          <?php endif; ?>
                        </option>
                    <?php endforeach; ?>
                  </optgroup>
                  <?php endif; ?>
                </option>
                <?php endforeach; ?>
              </select>
            </div>

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Can you show how it renders now in your browser? As mentioned here current HTML spec does not include multi-nested optgroups, so I'm not sure how you achieve 3rd level indentation there.

So there are two solutions of your problem:

easier is using   x times = your current nested level. See here:

    <body>
        <select>
                <option>Option 1</option>
                <option>Option 2</option>
                <!-- as many &nbsp; 's as the nest level you need -->
                <option>&nbsp;&nbsp;Option 3</option>
                <option>&nbsp;&nbsp;Option 4</option>
                <!-- as many &nbsp; 's as the nest level you need -->
                <option>&nbsp;&nbsp;&nbsp;&nbsp;Option 3</option>
                <option>&nbsp;&nbsp;&nbsp;&nbsp;Option 4</option>
                <!-- as many &nbsp; 's as the nest level you need -->
                <option>&nbsp;&nbsp;Option 5</option>
                <option>&nbsp;&nbsp;Option 6</option>
        </select>
    </body>

using kind of UI library such as this one + indenting your groups with CSS paddings

I didn't even think about that! It sounds very simple but how do you think that I should use it with my code? As you can see, all `` end at the bottom of the code. — Solo, Dec 01 '15 at 13:49
prepend every `name; ?>` (`$location3->name` etc) with `str_repeat(' ',$current_nest_level)` — Alexey, Dec 01 '15 at 14:09
I need some sleep.. I can't belive I even asked this. Thanks for your help! — Solo, Dec 01 '15 at 14:12

Error with nested dropdown format

1 Answers1