Forum PHP.pl > [JavaScript]jQuery zaznaczenie kilku opcji w select

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]jQuery zaznaczenie kilku opcji w select

Elber

23.03.2012, 16:32:21

Witam,

mam listę mulit select w której myszką za pomocą ctrl mogę zaznaczyć kilka opcji, a jak dokonać takiego efektu poprzez jQuery ?

Chciałbym żeby po kliknięciu w jakiś button zaznaczyła mi się opcja na liście, jak kliknę w inny button to żeby na tej samej liście zaznaczyła się następna opcja nie usuwając tamtej

Jeśli chodzi o zaznaczenie jednej opcji to robię to tak

$('#button1').click(function(){
var alt = $('#button1').attr('alt');
$('#select1 option:contains("'+alt+'")').attr('selected', true);
});

i zaznacza mi się opcja na liście która w nazwie ma to co button w alt, ale gdy kliknę w inny button to ta opcja wcześniejsza mi się kasuje i zaznacza opcja która ma w nazwie to co button2 w alt ... jak dodać zaznaczenie nie usuwając starego ?

Nie da się zaznaczyć kilku rzeczy w select poprzez js/jquery

Niktoś

23.03.2012, 16:42:14

http://jsfiddle.net/CfpXV/6/
Spójrz na kod jq i sobie dostosuj do swoich celów.

daniofantasy

23.03.2012, 16:46:01

idac na czuja to zeby Ci sie nie kasowalo, musisz najpierw pobrac obecne zaznaczenia - np przeleciec calego selecta .each i jezeli ktoras z opcji jest zaznaczona, to zapisac ja np do tablicy i potem oprocz zaznaczanych elementow pobrac rowniez te co masz w tablicy z wczesniejszego selecta

Elber

23.03.2012, 16:50:57

Cytat(daniofantasy @ 23.03.2012, 16:46:01 )

No też tak myślę ale nie umiem tego dokonać, nie wiem jak pobrać i dopisać te rzeczy co są już zaznaczone

daniofantasy

23.03.2012, 17:01:16

na moje oko to bedzie cos takiego:

[PHP] pobierz, plaintext 
var aSelect = [];
var x = 0;
$('#select1').each(function() {
 aSelect[x] = $(this).find('option:contains("'+alt+'")').attr('selected');
x++;
});
[PHP] pobierz, plaintext

i w aSelect powinienes miec elementy selecta

impro

23.03.2012, 17:12:25

jak chcemy dostać się do kolejnych elementów zwracanych przez jqyery piszemy eq(numer elementu)
pomogło

[PHP] pobierz, plaintext 
var i = 0;
vat tablica = new Array;
tablica[i] = $(this).find('option:contains("'+alt+'")').attr('selected').eq(i) // eg(i) napewno zwraca kolejne elementy ale nie wiem co oznacza reszta kodu eq powinno być zaraz za wyselksjonowanym elementem
i++
[PHP] pobierz, plaintext

Elber

23.03.2012, 20:41:36

Nic nie chce zadziałać ;/ Nie ma jakiegoś prostego sposobu na dodanie zaznaczenia nie usuwając starych ?

d3ut3r

24.03.2012, 07:54:53

o to chodziło ?

http://jsfiddle.net/SH7KM/3/

Elber

24.03.2012, 16:59:13

Dokładnie o to

Wielkie dzięki

Hmm no i niby to trochę przerobiłem że jak jest już opcja 1 zaznaczona to zaznacza opcję 3.. http://jsfiddle.net/SH7KM/6/ .. ale u mnie to nie chce zadziałać ;/

http://www.hellux.home.pl/hansekind/german...arderobe-1.html

Jak klikniesz na jakiś motyw np. różowy statek to na dole po prawej zaznacza się Hausbot +4,50 € a jak zaznaczysz np wróżkę to powinno być zaznaczone i Hausbot +4,50 € i Fee +4,50 € a zaznacza się tylko Fee +4,50 €

Tak wygląda funkcja .click()

Kod

$('#hellux_letters img, #hellux_themes img').click(function(){
        var object_width = $(this).innerWidth();

        if(object_width < place_widh){
            place_widh = place_widh - object_width - 4;

            var src = $(this).attr('src');
            var alt = $(this).attr('alt');
            var alt2 = $(this).attr('alt2');
            var iid = $(this).attr('iid');

            var child = '<img src="' + src + '" alt="' + alt + '" alt2="' + alt2 + '" iid="'+ iid +'" />';
            $("#hellux_sortable").append(child);

            if($(this).attr('alt2') == 'theme'){
                $('#options_451_2').attr("checked", true);
                $('#options_451_2').click();
                theme = theme + 1;

                $("#select_386 option").each(function(){
                    if($("#select_386 option:contains('"+alt+"')").is(":not(:selected)")){
                       $("#select_386 option:contains('"+alt+"')").attr("selected", true);
                    }
                });

                $("#select_386 option").change();

            } else if($(this).attr('alt2') == 'letter'){
                $('#options_389_2').attr("checked", true);
                $('#options_389_2').click();
                letter = letter + 1;
                $('#options_464_text').val($('#options_464_text').val() + $(this).attr('alt'));

                if(color == 'pink'){
                    $('#options_463_3').attr("checked", true);
                    $('#options_463_3').click();
                } else {
                    $('#options_463_2').attr("checked", true);
                    $('#options_463_2').click();
                }
            }
        } else {
            alert('za mało miejsca');
        }
    });

Co robię źle

Kompletnie nikt nie wie jak to zrobić ? ;(

Necsord

24.03.2012, 17:37:44

Nie wiem czy to jedyny problem bo bałagan jest niesamowity jeżeli mam być szczery.

[HTML] pobierz, plaintext 
                $('#options_451_2').attr("checked", true);
                $('#options_451_2').click();
                theme = theme + 1;
 
                $("#select_386 option").each(function(){
                    if($("#select_386 option:contains('"+alt+"')").is(":not(:selected)")){
                       $("#select_386 option:contains('"+alt+"')").attr("selected", true);
                    }
                });
 
                $("#select_386 option").change();
[HTML] pobierz, plaintext

Przed każdym zaznaczaniem wywołujesz $('#options_451_2').click(); czyli jeżeli dobrze rozumiem naciskasz przycisk "Ja" przy "Motive hinzufügen". To teraz zrób tak:
1) Wybierz jakiś element czyli multiselekt będzie miał 1 element zaznaczony.
2) Nacisnij wyżej wymieniony "Ja"
Zauważysz ze on powoduje wyczyszczenie / przeładowanie ( nie wnikałem co on robi ) selektora.

Elber

24.03.2012, 17:57:17

Faktycznie ... to było przyczyną ... dziękuję że to zauważyłeś, a to że tam jest bałagan to wiem

Ale uporządkuję to na końcu jak wszystko będzie działało

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.