Jquery: .change auf Dropdown innerhalb einer Tabelle

[Yaslaw]

So, meine ersten Gehversuche mit JQuery. Und schon suche ich wahrscheinlich bei Google nach den falschen Begriffen.

Ich habe eine Tabelle mit einem Dropdown in einem Feld (<select>). Wenn davon eines angeklickt wird, sollte ein anderes Feld in der Zeile den Wert übernehmen.

<table>
    <tr>
        <td>
            <select id="num" name="num[]">
                <option value = "1">Eins</option>
                <option value = "2">Zwo</option>
            </select>
        </td>
        <td>
            <input type="text" id="sel" name="sel[]"></input>        
        </td>
    </tr>
    <tr>
        <td>
            <select id="num" name="num[]">
                <option value = "3">Drü</option>
                <option value = "4">Vier</option>
            </select>
        </td>
        <td>
            <input type="text" id="sel" name="sel[]"></input>        
        </td>
    </tr>
</table>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#num").change(function(){
            	var mynum=$(this).children('option:selected').val();
            	alert(mynum);
            	//TODO: Irgendwie in das Feld in der Richtigen Zeile schreiben
            	$('sel').update(mynum);
            });    
        });
    </script>

Leider reagiert mein Script nur auf den Dropdwon der ersten Zeile.
Zudem soll dann das Feld sel in der Richtigen Zeile abgefüllt werden.

Hat da jemand Tipps für mich?

 

[Maniac]

Vielleicht hat jQuery ein Problem damit das du die ID "num" 2 mal vergibst. Das darf laut W3C nur einmal vorkommen. Bei jQuery kann man hier den Klassen-Selektor verwenden ( ".class" ). Was gibt dir denn dein alert aus? Und warum vergibst du Arrays als namen bei deinen Selects?

".update()" sagt mir jetzt erstmal gar nichts, aber um Inhalte in ein ELement zu schreiben verwende ich:

$('selektor').html('wert');

// ich weiß nicht obs bei Input feldern anders geht, aber das wär dann auch eine Lösung:
$('input-selektor').attr('value', 'wert');

Vielleicht hilft dir ja der jQuery-Api Browser auch weiter:

http://api.jquery.com/browser/

 

[Yaslaw]

Ich werd das mit class mal ausprobieren

Den Namen geb ich als Array aus, weil nachher das Resulatat an PHP geschickt wird und ich dort einen Array brauche. Klassische Formular<->PHP Kominukation.

Was ist $('selector') Ich babe doch kein Feld das so heisst. Auch $('input-selektor') hab ich glaub so nicht.

 

[Maniac]

Ich werd das mit class mal ausprobieren

Den Namen geb ich als Array aus, weil nachher das Resulatat an PHP geschickt wird und ich dort einen Array brauche. Klassische Formular<->PHP Kominukation.

Was ist $('selector') Ich babe doch kein Feld das so heisst. Auch $('input-selektor') hab ich glaub so nicht.

Mit selektor meinte ich natürlich das Element, die Klasse oder die ID nach der du selektieren möchtest. Hier ist alles möglich vom "Elementnamen" bis "Elementnamen[type=input]" bis zu "input" oder auch die Klasse oder die ID.

Das Array brauchste doch nur bei Multiple-Selects.

 

[Yaslaw]

Thx. Mit intensivem Doku-Studium zu den Selectors hab ich es nun hingekriegt.

Den Array brauch ich für die Auswertung im PHP. Anzahl Zeilen werden mittels jquery.table.addrow.js dynamisch angepasst. Darum kann ich dort keine festen IDs vergeben.

Hier nun meine Lösung für andere die auf dasselbe Prblem stossen (oder die eine bessere Idee haben *g*)

        $(document).ready(function() {
            // Wenn ein Select dessen Name mit nnum beginnt den folgenden Code ausführen
            $("select[name^='nnum']").change(function(){
                //Ausgewählte OPtion auslsen
                var option = $(this).children('option:selected');
                //Den Wert auslesen
            	var mynum=option.val();
            	//Die Option-Beschriftung auslesen
            	var mytitle =option.html();
            	//Auf den <td> und anschliessnd auf den <tr> oberhalb des Elements zugreiffen und im 
            	// 2ten <td> den Input mit dem Namen 'sel*' aussuchen.
            	$(this).parent().parent().find("td:eq(1) input[name^='sel']").attr("value", mynum+": "+mytitle);
            });
        });

    <form method="post">
        <table>
            <tr>
                <td>
                    <select name="nnum[]">
                        <option value = "1">Eins</option>
                        <option value = "2">Zwo</option>
                    </select>
                </td>
                <td>
                    <div>Wert wird übernommen:</div>
                    <input type="text" name="sel[]"></input>        
                </td>
            </tr>
            <tr>
                <td>
                    <select name="nnum[]">
                        <option value = "3">Drü</option>
                        <option value = "4">Vier</option>
                    </select>
                </td>
                <td>
                    <div>Wert wird übernommen:</div>
                    <input type="text" name="sel[]"></input>        
                </td>
            </tr>
            <!-- Beid dieser Zeile darf das Script nicht funkionieren. Der Name ist anders -->
            <tr>
                <td>
                    <select name="s[]">
                        <option value = "5">Füf</option>
                        <option value = "6">Sex</option>
                    </select>
                </td>
                <td>
                    <div>Wert wird <b>Nicht</b> übernommen:</div>
                    <input type="text" name="sel[]"></input>        
                </td>
            </tr>
        </table>
        <input type="submit" name="submit" value="Submit" />
    </form>

Und die Auswertung von $_POSZ

Array
(
    [nnum] => Array
        (
            [0] => 1
            [1] => 4
        )

    [sel] => Array
        (
            [0] => 1: Eins
            [1] => 4: Vier
            [2] => 
        )

    [s] => Array
        (
            [0] => 5
        )

    [submit] => Submit
)

 

[Maniac]

Sieht doch gut aus, jetzt wird yaslaw auch noch zum jQuery-Guru

 

[Yaslaw]

Sieht doch gut aus, jetzt wird yaslaw auch noch zum jQuery-Guru

So schnell geht das auch nicht.....