jquery closest('li').find('a').text() Problem

Hi zusammen,

ich habe den folgenden Code:

<li class="list-group-item">
    <a href="javascript:;" onclick="toggle_div('stunden');">Stunden</a>          	
    <div id='stunden' style='display:none;' class="filter_div">            	
        <select id="filter_stunden" name="filter_stunden" class="selectpicker" data-live-search="true" data-width="100%" data-actions-box="true">                    
            <option value="" selected>Alles</option>                    
            <option value="1">Stunden komplett verbraucht</option>                    
            <option value="2">Stunden überschritten</option>                    
            <option value="3">Stunden überschritten (Projekte ohne Stundenlimit ausschließen)</option>                    
            <option value="4">Stundenlimit nicht überschritten</option>                    
            <option value="5">Bereits Stunden gebucht</option>                
        </select>            
    </div>         
</li>

und möchte mir nun gerne den Text des Links ausgeben lassen ("Stunden"), ohne dem Link eine ID zu verpassen (weil das in dem Fall nicht geht).

Mein folgender Versuch

console.log("FILTER:'" + $('#filter_stunden').closest("li").find("a").text() + "': " + $("option:selected", $('#filter_stunden')).text() );

erzeugt diese Ausgabe:

FILTER:'StundenAllesStunden komplett verbrauchtStunden überschrittenStunden überschritten (Projekte ohne Stundenlimit ausschließen)Stundenlimit nicht überschrittenBereits Stunden gebucht': Alles

Ich hätte aber nun das hier erwartet:

Filter:'Stunden':Alles

Was mache ich falsch

Bin für jeden Tipp dankbar.

Grüßle

Daniel

Hi,

im tatsächlichen Script (das ich für dieses Beispiel vereinfachen wollte) habe ich mehrere Selectboxen, die alle eine ID mit dem Präfix "filter_" haben.

Die Selectoboxen befinden sich alle in so einer Verschachtelung

<li class="list-group-item">
    <a href="javascript:;" onclick="toggle_div('stunden');">BESCHRIFTUNG DER SELECTBOX</a>              
    <div id='stunden' style='display:none;' class="filter_div">                
        [HIER STEHT DIE SELECTBOX MIT ID "filter_"+irgendwas]   
    </div>         
</li>

Im Javascript will ich dann für alle Selectboxen den Text, der oben mit dem Platzhalter BESCHRIFTUNG DER SELECTBOX angegeben ist, ausgeben.

Aber nur, für selectboxen, bei denen auch was ausgewählt ist.

Hier ist mein Versuch, der aber eben nicht korrekt funktioniert:

$('[id^=filter_]').each(function( index ) {
    if ($("option:selected", this).text() !="") {
        console.log("FILTER:'" + $(this).closest("li").find("a").text() + "': " + $("option:selected", this).text() );
    }
});

Ich hoffe, dadurch wirds ein bisschen klarer...

Danke schon mal für eure Hilfe.

Viele Grüße

Daniel