Dropdown...Problem/Frage

philipp.hat.alles · 9 März 2011

Hi Leute,

ich hab mal was an Dropdown zu fragen...
Wenn ich ganz normal sag ich mal 3 dropmenus erstell und da ein paar optionen einbaue. Und wenn ich in der Browseransicht da was auswähle und das es dann auch so bleibt, bis ich es wieder ändere? Geht sowas, wenn ja, wie? Auch das es bleibt, wenn ich diese HTML-Datei schließe
Danke

vast · 9 März 2011

wenn du willst, das die Seite sich "merken" kann, was ausgewählt war,nachdem das Fenster schonmal geschlossen wurde, geht das zB mit cookies und php.
Setzt aber voraus, das der client/browser cookies akzeptiert.

philipp.hat.alles · 10 März 2011

ja, und weiter?

vast · 10 März 2011

ja, und weiter gehts, indem du zunächst schaust, wie man einen cookie setzt und wieder ausliest.

So und jetzt zur Sache, die ich gar nicht bedacht habe, als ich antwortete:
Wir müssen javascript einsetzen, um die Änderung des select-Fields mitzubekommen, und um bei erneutem Laden der Seite die richtige option zu selecten.

(Man könnte auch durchaus einen cookie per php setzen und per js auslesen oder ändern. Hier Info dazu.)

dein dropdown könnte zB so aussehen:

HTML:

<select onChange="writeSelectValue();"...

...wobei die Funktion writeSelectValue() den value des gerade selektierten option-Elements in den cookie schreibt.

Beim nächsten Besuch der Seite fragt man dann ab obs den cookie gibt, wenn ja, liest man den Wert des values aus und sucht dann per js wieder die option mit diesem value und gibt dem selected="selected".

(Wenn jemand eine Möglichkeit kennt, Änderungen an selects per php abzufangen, so möge er bitte sprechen.)

philipp.hat.alles · 10 März 2011

yOo, das ist schon gut, bloß weiß ich jetz wirklich nicht damit was anzufangen.
Bin zwar JS-Amateur aber PHP keine Spur, wenn Hilfe geben kannst, dann bin ich dir SEHR DANKBAR!

vast · 10 März 2011

hmnja, ich hab auch sonst viel zu tun ;)
Daher nehm ich mich mal wieder jQuery und sein cookie-plugin, sonst brauch ich zu lange.
Meine Variante klappt sowieso nicht ohne js, also sehe ich auch keinen Grund mehr, den cookie in php zu setzen.

Bitte beachte dabei, das in FF in den Optionen gern eingestellt ist, das cookies beim Schliessen des Browsers gelöscht werden.
In dem Fall gehts natürlich nicht.

So, jetz aber:

HTML:

<!DOCTYPE html> 
<html>
<head>
    <title>Cookie Monster</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;} 

body {
    font-family: Arial,Helvetica,sans-serif;
}

#main {
    padding: 40px;
}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
        // jQuery cookie plugin: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
        jQuery.cookie = function (key, value, options) {

            // key and at least value given, set cookie...
            if (arguments.length > 1 && String(value) !== "[object Object]") {
                options = jQuery.extend({}, options);

                if (value === null || value === undefined) {
                    options.expires = -1;
                }

                if (typeof options.expires === 'number') {
                    var days = options.expires, t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }

                value = String(value);

                return (document.cookie = [
                    encodeURIComponent(key), '=',
                    options.raw ? value : encodeURIComponent(value),
                    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                    options.path ? '; path=' + options.path : '',
                    options.domain ? '; domain=' + options.domain : '',
                    options.secure ? '; secure' : ''
                ].join(''));
            }

            // key and possibly options given, get cookie...
            options = value || {};
            var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
            return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
        };
// --------- END COOKIE PLUGIN ---------

$(document).ready(function(){
    
    var check = $.cookie('my_cookie'); // gibts den cookie schon?
    
    if( check ) { // wenns den gibt
        // setz die option mit dem cookie value auf selected
        $('#dropdown option[value='+check+']').attr('selected','selected'); 
    }
    
    
    var current = '';
    
    $('#dropdown').change(function(){  //wenn dropdown geändert wird
        //alten cookie weg
        $.cookie('my_cookie', '', {expires: -1});
        
        current = $('#dropdown option:selected').attr('value'); // hier holen wir uns den gewählten value
        // cookie setzen, ist 30 Tage gültig
        $.cookie('my_cookie', current, {expires: 30} );         
    });
});
        
</script>
</head>

<body>
    <div id="main">
        <select name="dropdown" id="dropdown">
            <option value="value1">Value1</option>
            <option value="value2">Value2</option>
            <option value="value3">Value3</option>
            <option value="value4">Value4</option>
            <option value="value5">Value5</option>
        </select>
    </div>
</body>
</html>

philipp.hat.alles · 11 März 2011

danke danke danke danke danke danke danke danke danke, usw.
Und wie bekomme ich es jetz hin, dass es mit 3 dropdowns macht ? natürlich soll dann jeder ne anmdere bedeutung tragen

vast · 11 März 2011

stimmt ja...

so sollte das klappen, deine selects müssen nur wie im Beispiel die IDs tragen, die im script benutzt werden:

HTML:

<!DOCTYPE html> 
<html>
<head>
    <title>Cookie Monster</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;} 

body {
    font-family: Arial,Helvetica,sans-serif;
}

#main {
    padding: 40px;
}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
        // jQuery cookie plugin: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
        jQuery.cookie = function (key, value, options) {

            // key and at least value given, set cookie...
            if (arguments.length > 1 && String(value) !== "[object Object]") {
                options = jQuery.extend({}, options);

                if (value === null || value === undefined) {
                    options.expires = -1;
                }

                if (typeof options.expires === 'number') {
                    var days = options.expires, t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }

                value = String(value);

                return (document.cookie = [
                    encodeURIComponent(key), '=',
                    options.raw ? value : encodeURIComponent(value),
                    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                    options.path ? '; path=' + options.path : '',
                    options.domain ? '; domain=' + options.domain : '',
                    options.secure ? '; secure' : ''
                ].join(''));
            }

            // key and possibly options given, get cookie...
            options = value || {};
            var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
            return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
        };
// --------- END COOKIE PLUGIN ---------

$(document).ready(function(){
    
    var check = $.cookie('my_cookie'); // gibts den cookie schon?
    var check2 = $.cookie('my_cookie2');
    var check3 = $.cookie('my_cookie3');    
    
    if( check ) { // wenns den gibt
        // setz die option mit dem cookie value auf selected
        $('#dropdown option[value='+check+']').attr('selected','selected'); 
        $('#dropdown2 option[value='+check2+']').attr('selected','selected'); 
        $('#dropdown3 option[value='+check3+']').attr('selected','selected'); 
    }
        
    var current = '';
    var changedSelect = '';    
    var removeThis = '';
    var newCookie = '';
    
    $('select').change(function(){  //wenn dropdown geändert wird
    
        //welches dropdown wurde geändert?
        changedSelect = $(this).attr('id');

        //welcher cookie muss dann weg?
        switch(changedSelect) {
            case 'dropdown':
              removeThis = "my_cookie";
              cookieNum = '';
            break;
            
            case 'dropdown2':
              removeThis = "my_cookie2";
              cookieNum = '2';
            break;
            
            case 'dropdown3':
              removeThis = "my_cookie3";
              cookieNum = '3';
            break;
        }

        // alten cookie weg
        $.cookie(removeThis, '', {expires: -1});
        
        newCookie = removeThis;
        
        // value aus changed select in var current schreiben
        current = $('#dropdown'+cookieNum+' option:selected').attr('value'); // hier holen wir uns den gewählten value
        
        // cookie setzen, ist 30 Tage gültig
        $.cookie( newCookie, current, {expires: 30} );
        
    });
});
        
</script>
</head>

<body>
    <div id="main">
        <select name="dropdown" id="dropdown">
            <option value="value1">Value1</option>
            <option value="value2">Value2</option>
            <option value="value3">Value3</option>
            <option value="value4">Value4</option>
            <option value="value5">Value5</option>
        </select>
        <select name="dropdown2" id="dropdown2">
            <option value="value1">dropdown2-Value1</option>
            <option value="value2">dropdown2-Value2</option>
            <option value="value3">dropdown2-Value3</option>
            <option value="value4">dropdown2-Value4</option>
            <option value="value5">dropdown2-Value5</option>
        </select>
        <select name="dropdown3" id="dropdown3">
            <option value="value1">dropdown3-Value1</option>
            <option value="value2">dropdown3-Value2</option>
            <option value="value3">dropdown3-Value3</option>
            <option value="value4">dropdown3-Value4</option>
            <option value="value5">dropdown3-Value5</option>
        </select>    
    </div>
</body>
</html>

philipp.hat.alles · 11 März 2011

ein fettes, hamma, megageiles DANKE!

Ich weiß, ich verlange viel. Könnte man da jetz noch document.write (auf der gleichen Seite) reinbringen? So, dass er diese ausgewählten Sachen nochmal unten drunter schreibt. Wenn du Grund hören willst, warum, dann sag ichs dir.;)

philipp.hat.alles · 11 März 2011

eine Frage noch was bedeutet das:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

??

vast · 11 März 2011

eine Frage noch was bedeutet das:...

Da ich wollte, das man den code so wie er ist lauffähig copy/pasten kann, habe ich jQuery von google geladen. Das ist ein öffentlicher Service, den man nutzen darf.
Normalerweise würdest du dir jQuery hier runterladen und normal als Datei einbinden.

vast · 11 März 2011

Könnte man da jetz noch document.write (auf der gleichen Seite) reinbringen? So, dass er diese ausgewählten Sachen nochmal unten drunter schreibt.

geht auch.
Hier mit output:

HTML:

<!DOCTYPE html> 
<html>
<head>
    <title>Cookie Monster</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;} 

body {
    font-family: Arial,Helvetica,sans-serif;
}

#main {
    padding: 40px;
}

#output {
    padding:10px;
    background-color:#CCC;
    margin: 15px 0;
}
#output div {
    margin: 5px 0;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
        // jQuery cookie plugin: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
        jQuery.cookie = function (key, value, options) {

            // key and at least value given, set cookie...
            if (arguments.length > 1 && String(value) !== "[object Object]") {
                options = jQuery.extend({}, options);

                if (value === null || value === undefined) {
                    options.expires = -1;
                }

                if (typeof options.expires === 'number') {
                    var days = options.expires, t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }

                value = String(value);

                return (document.cookie = [
                    encodeURIComponent(key), '=',
                    options.raw ? value : encodeURIComponent(value),
                    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                    options.path ? '; path=' + options.path : '',
                    options.domain ? '; domain=' + options.domain : '',
                    options.secure ? '; secure' : ''
                ].join(''));
            }

            // key and possibly options given, get cookie...
            options = value || {};
            var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
            return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
        };
// --------- END COOKIE PLUGIN ---------

$(document).ready(function(){
    
    var check = $.cookie('my_cookie'); // gibts den cookie schon?
    var check2 = $.cookie('my_cookie2');
    var check3 = $.cookie('my_cookie3');    
    
    if( check ) { // wenns den gibt
        // setz die option mit dem cookie value auf selected
        $('#dropdown option[value='+check+']').attr('selected','selected'); 
        $('#dropdown2 option[value='+check2+']').attr('selected','selected'); 
        $('#dropdown3 option[value='+check3+']').attr('selected','selected'); 
    }
        
    var current = '';
    var changedSelect = '';    
    var removeThis = '';
    var newCookie = '';
    
    $('select').change(function(){  //wenn dropdown geändert wird
    
        //welches dropdown wurde geändert?
        changedSelect = $(this).attr('id');

        //welcher cookie muss dann weg?
        switch(changedSelect) {
            case 'dropdown':
              removeThis = "my_cookie";
              cookieNum = '';
            break;
            
            case 'dropdown2':
              removeThis = "my_cookie2";
              cookieNum = '2';
            break;
            
            case 'dropdown3':
              removeThis = "my_cookie3";
              cookieNum = '3';
            break;
        }

        // alten cookie weg
        $.cookie(removeThis, '', {expires: -1});
        
        newCookie = removeThis;
        
        // value aus changed select in var current schreiben
        current = $('#dropdown'+cookieNum+' option:selected').attr('value'); // hier holen wir uns den gewählten value
        currentText = $('#dropdown'+cookieNum+' option:selected').text(); // hier holen wir uns den gewählten Text
        
        // cookie setzen, ist 30 Tage gültig
        $.cookie( newCookie, current, {expires: 30} );
        
        // Output: value und text
        $('#output').append('<div>Value: '+current+'<br/>Text: '+currentText+'</div>');
        
    });
});
        
</script>
</head>

<body>
    <div id="main">
        <select name="dropdown" id="dropdown">
            <option value="value1">Value1</option>
            <option value="value2">Value2</option>
            <option value="value3">Value3</option>
            <option value="value4">Value4</option>
            <option value="value5">Value5</option>
        </select>
        <select name="dropdown2" id="dropdown2">
            <option value="value1">dropdown2-Value1</option>
            <option value="value2">dropdown2-Value2</option>
            <option value="value3">dropdown2-Value3</option>
            <option value="value4">dropdown2-Value4</option>
            <option value="value5">dropdown2-Value5</option>
        </select>
        <select name="dropdown3" id="dropdown3">
            <option value="value1">dropdown3-Value1</option>
            <option value="value2">dropdown3-Value2</option>
            <option value="value3">dropdown3-Value3</option>
            <option value="value4">dropdown3-Value4</option>
            <option value="value5">dropdown3-Value5</option>
        </select>  

        <div id="output">
            
        </div>
    </div>
</body>
</html>

philipp.hat.alles · 11 März 2011

danke, warst ne große Hilfe;)

Dropdown...Problem/Frage

philipp.hat.alles

Guest

vast

Neues Mitglied

philipp.hat.alles

Guest

vast

Neues Mitglied

philipp.hat.alles

Guest

vast

Neues Mitglied

philipp.hat.alles

Guest

vast

Neues Mitglied

philipp.hat.alles

Guest

philipp.hat.alles

Guest

vast

Neues Mitglied

vast

Neues Mitglied

philipp.hat.alles

Guest

Neueste Beiträge