• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit 2 select Menüs

N

Nikita

Mitglied
Hallo liebe Community,

ich sitze gerade an einem Schulprojekt.
Es heisst eine App zu entwickeln die sich um den Grundriss unserer Schule dreht.
Ich habe also folgend 2 Auswahlmenüs einmal für die Etage und einmal für die Räume.
Soweit so gut. Ich möchte nun dass, wenn ich einen raum in der Grafik anklicke sich a eine Art Stecknadel an diesen Raum heftet und b der angeklickte Raum im jeweiligen Menü für die Räume selected gesetzt und angezeigt wird.
Leider greifen meine Klick funktionen irgendwie nicht korrekt denn selbst ohne dass ich einen Raum angeklickt habe wird immer der letzte Eintrag in meiner Funktion angezeigt .

Folgende Codes gibts dazu:

html
HTML: 
<form>
                <select class="box" id="auswahl" onChange=formHandler1(form)>
                    <option value="none" selected disabled>Raum</option><option value="0201">0.2.01</option><option value="0202">0.2.02</option><option value="0203">0.2.03</option><option value="0204">0.2.04</option><option value="0205">0.2.05</option><option value="0206">0.2.06</option><option value="0207">0.2.07</option><option value="0301">0.3.01</option><option value="0302">0.3.02</option><option value="0303">0.3.03</option><option value="0304">0.3.04</option><option value="0305">0.3.05</option><option value="0307">0.3.07</option><option value="0308">0.3.08</option><option value="0309">0.3.09</option><option value="0401">0.4.01</option><option value="0402">0.4.02</option><option value="0403">0.4.03</option><option value="0404">0.4.04</option><option value="0406">0.4.06</option><option value="0407">0.4.07</option><option value="0409">0.4.09</option>
                </select>
            </form>

Code: 
function equalStrings(){
    $("g#raum0201").click(function(){
        setFlash(78, 35);
    });
    $("#auswahl").val("0201").click(function(){
        setFlash(78, 35);
    });
    $("g#raum0203").click(function(){
        setFlash(78, 42);
    });
    $("#auswahl").val("0203").click(function(){
        setFlash(78, 42);
    });
    $("g#raum0207").click(function(){
        setFlash(78, 48);
    });
    $("#auswahl").val("0207").click(function(){
        setFlash(78, 48);
    });
    $("g#raum0103").click(function(){
        setFlash(80, 61);
    });
    $("#auswahl").val("0103").click(function(){
        setFlash(80, 61);
    });
    $("g#raum0304").click(function(){
        setFlash(80, 66);
    });
    $("#auswahl").val("0304").click(function(){
        setFlash(80, 66);
    });
    $("g#raum0305").click(function(){
        setFlash(80, 70);
    });
    $("#auswahl").val("0305").click(function(){
        setFlash(80, 70);
    });
    $("g#raum0307").click(function(){
        setFlash(80, 74);
    });
    $("#auswahl").val("0307").click(function(){
        setFlash(80, 74);
    });
    $("g#raum0308").click(function(){
        setFlash(92, 74);
    });
    $("#auswahl").val("0308").click(function(){
        setFlash(92, 74);
    });
    $("g#raum0303").click(function(){
        setFlash(94, 68);
    });
    $("#auswahl").val("0303").click(function(){
        setFlash(94, 68);
    });
    $("g#raum0302").click(function(){
        setFlash(94, 60);
    });
    $("#auswahl").val("0302").click(function(){
        setFlash(94, 60);
    });

}

function formHandler1(form) {

    text1 = form.auswahl.options[form.auswahl.selectedIndex].value;
    equalStrings();
   
}

das setFlash ist für die Stecknadel da zum pisitionieren.
Ich hoffe ich konnte mein Problem irgenwie verständlich erklären :/
anbei mal noch ein screenshoot dazu
ohneAuswahl.png mitAuswahl.png

danke schon einmal für eure Hilfe!

LG Niki
 
Werbung:
okay ja das leuchtet ein... nur hab ich grad iwie n brett vorm kopp in was für eine function muss ich die klickangaben denn schreiben?

EDIT:
ok habs jetzt so
Code: 
$(function(){
$("g#raum0201").click(function(){
        setFlash(78, 35);
    });
    $("#auswahl").val("0201").click(function(){
        setFlash(78, 35);
    });
    $("g#raum0203").click(function(){
        setFlash(78, 42);
    });
    $("#auswahl").val("0203").click(function(){
        setFlash(78, 42);
    });
// ect...
});
funktioniert aber leider nun gar nicht mehr... beim klicken passiert rein gar nix mehr... ich bin heut einfach durch sry..
 
Zuletzt bearbeitet:
Werbung:
Was genau willst du denn erreichen: dass onchange() eine Reihe von Click-Events an Selektoren gebunden werden?
 
ich will, dass wenn man auf einen Raum klickt(Blatt) A: der Marienkäfer als ein Art Stecknadel den geklickten Raum markiert und B: gleichzeitig im Menü unten(Raum 0.3.02) das jeweilige option selected gesetzt und angezeigt wird
 
Das ist mir jetzt auch etwas zu spät, um mich da reinzudenken. Aber eigentlich braucht es hier doch kein click(), sondern nur ein change().

Liefer den Wert des des selektierten Option-Feldes und tu etwas damit:
Code: 
$('#auswahl').change(function() {
    var el = $(this).find(":selected");
    var el_value = $(this).find(":selected").val();
    console.log( el_value );
    $(el).addClass('bar');
});
 
Werbung:
ja habe es jetzt hinbekomm und zwar so:

Code: 
$(function() {
    $('#auswahl').live('change', function(){
        if ($(this).val() == '0201') {
          setFlash(78, 35);
          $('.info').css('display', 'block');
          $('.info .infoIn').html('<h1>Raum 0.2.01</h1><p class="left">Wer?</p><p class="right">Maria Mustermann</p><div class="clear"></div><p class="left">Wo?</p><p class="right">Im Erdgeschoss</p><div class="clear"></div><a href="#" title="mehr">mehr Infos >>></a>');
        }if ($(this).val() == '0203') {
        setFlash(78, 42);
        $('.info').css('display', 'block');
        $('.info .infoIn').html('<h1>Raum 0.2.03</h1><p class="left">Wer?</p><p class="right">Maria Mustermann</p><div class="clear"></div><p class="left">Wo?</p><p class="right">Im Erdgeschoss</p><div class="clear"></div><a href="#" title="mehr">mehr Infos >>></a>');
        }
//ect...
    }});
    $('g#raum0201').live('click', function(){
        $('#auswahl').val('0201');
        setFlash(78, 35);
        $('.info').css('display', 'block');
        $('.info .infoIn').html('<h1>Raum 0.2.01</h1><p class="left">Wer?</p><p class="right">Maria Mustermann</p><div class="clear"></div><p class="left">Wo?</p><p class="right">Im Erdgeschoss</p><div class="clear"></div><a href="#" title="mehr">mehr Infos >>></a>');

    });

    $('g#raum0203').live('click', function(){
        $('#auswahl').val('0203');
        setFlash(78, 42);
        $('.info').css('display', 'block');
        $('.info .infoIn').html('<h1>Raum 0.2.03</h1><p class="left">Wer?</p><p class="right">Maria Mustermann</p><div class="clear"></div><p class="left">Wo?</p><p class="right">Im Erdgeschoss</p><div class="clear"></div><a href="#" title="mehr">mehr Infos >>></a>');

    });
//ect...
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben