Probleme mit 2 select Menüs

[Nikita]

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

<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>

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


danke schon einmal für eure Hilfe!

LG Niki

 

[Tronjer]

Was macht es für einen Sinn, aus einem Change-Event ein Klick-Event aufzurufen?

 

[Nikita]

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

$(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..

 

[Tronjer]

Was genau willst du denn erreichen: dass onchange() eine Reihe von Click-Events an Selektoren gebunden werden?

 

[Nikita]

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

 

[Tronjer]

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:

$('#auswahl').change(function() {
    var el = $(this).find(":selected");
    var el_value = $(this).find(":selected").val();
    console.log( el_value );
    $(el).addClass('bar');
});

 

[Tronjer]

Problem gelöst?

 

[Nikita]

ja habe es jetzt hinbekomm und zwar so:

$(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...
});