Validation error: Stray end tag option

Question

I am getting the error: "Stray end tag option." and I can tell it's coming from my mobile menus.

For some reason my code is adding extra tags at the end. Here is a little preview of what the w3 validation site is showing me.

<option value="">— Single Post Layouts<option value="http://domain.com/mag/portfolio/future-semiotics/">—— Full Image Post</option></option></option>

The strange thing is that it is not adding it to every single option just a few.

I have been searching in my code and I found this in the custom functions file.

class gbx_Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth); // don't output children opening tag (`<ul>`)
}

function end_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth); // don't output children closing tag
}

function start_el(&$output, $item, $depth, $args) {
    $url = '#' !== $item->url ? $item->url : '';
    $item->title = str_repeat("—", $depth).' '.$item->title; 
    $output .= '<option value="' . $url . '">' . $item->title;
}

function end_el(&$output, $item, $depth) {
    $output .= "</option>"; // replace closing </li> with the option tag
}
}

Any help on what I need to change to fix this issue would be great.

EDIT: This code is in my header.php I didn't know if it would help at all.

<div class="mobile-nav-holder visible-xs">
    <?php wp_nav_menu(array('theme_location' => 'main_navigation', 'container_class' => 'mobile-mainmenu', 'walker' => new gbx_Walker_Nav_Menu_Dropdown(),'items_wrap' => '<select><option selected>Navigation</option>%3$s</select>')); ?>
</div>

Answer 1

update your this function

function start_el(&$output, $item, $depth, $args) {
    $url = '#' !== $item->url ? $item->url : '';
    $item->title = str_repeat("—", $depth).' '.$item->title; 
    $output .= '<option value="' . $url . '">' . $item->title.'</option>';
}

and remove or not use function end_el(&$output, $item, $depth)

it will handle your output

<option value="">— Single Post Layouts</option>
<option value="http://domain.com/mag/portfolio/future-semiotics/">—— Full Image Post</option>

Answer 2

You're doing it wrong. Format your output manually with indentation and you'll get this:

    <option value="">— Single Post Layouts
        <option value="http://domain.com/mag/portfolio/future-semiotics/">—— Full Image Post</option>
    </option>
</option>

This class is supposed to generate nested structure and options are not supposed to be nested like this