嵌套下拉格式错误

Question

我有嵌套的下拉菜单，并且我遇到超过 2 次嵌套项的格式问题。我很确定我在 Paint 中制作的 "Mona Lisa" 质量图像将完美地展示它。

我正在寻找有关更改我的代码以使其正常工作的任何建议。

关于我的问题的图片：

代码：

          <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>

Answer 1

你能展示它现在在浏览器中的呈现方式吗？如前所述，here 当前 HTML 规范不包括多嵌套 optgroup，因此我不确定您如何在那里实现第 3 级缩进。

所以你的问题有两种解决方案：

更简单的方法是使用   x 次 = 您当前的嵌套级别。看这里：

    <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>

使用某种 UI 库，例如 this one + 使用 CSS 填充缩进你的组

嵌套下拉格式错误

Error with nested dropdown format

html

php

loops

nested