2012-04-10 11 views
1

Ich habe eine <select> Dropdown-Liste, die ich über jQuery in meinen HTML-Code einfüge. Ich habe keine Kontrolle über das HTML, aber ich habe die Kontrolle über das JavaScript.jQuery onChange propagieren einen Wert für die Eingaben

Ich versuche, einen Wert zu einem <input> Element zu unterstützen, wenn Sie eine Option auswählen. Grundsätzlich habe ich ein <select> Element mit <option id="1"> und <option id="2">onChange von diesem <select> Element;
Wenn Sie option#1 wählen sollte es den Wert dummy1 prop zu input[name="Check_Config_PaymentGateway_CreditCards_Login1"] und den Wert dummy2-input[name="Check_Config_PaymentGateway_CreditCards_Password"]
Wenn Sie option#2 wählen sollte es den Wert dummy3 zu input[name="Check_Config_PaymentGateway_CreditCards_Login1"] stützen und den Wert dummy4-input[name="Check_Config_PaymentGateway_CreditCards_Password"]

Ich habe an dieser jsFiddle gearbeitet.

Ich bin ziemlich neu bei JavaScript im Allgemeinen, geschweige denn jQuery. Das ist viel zu raffiniert für meine Fähigkeiten ... Wenn du mir helfen kannst, würde ich es sehr schätzen.

Antwort

0

Hier gehen Sie: http://jsfiddle.net/VW9N6/6/

Dies ist auf die change Ereignis des <select> Element bindet, wenn Änderungen seinen Wert zu erkennen, und aktualisiert dann den Wert des <input> Elemente.

+0

Einfach, verständlich, Perfekt :) – henryaaron

+0

Nicht negativ zu sein, aber das ist ziemlich ineffizient. Sie zwischenspeichern die Eingaben nicht und erstellen sie bei jeder Änderung neu. Darüber hinaus nutzen Sie die Verkettung in jQuery nicht aus. Sie müssen keine separate Funktion erstellen und diese dann innerhalb des Change-Handlers und inline für das erste Laden der Seite aufrufen. Setzen Sie einfach den Funktionsinhalt in den Handler und ketten Sie danach .change() ein, um den Handler sofort aufzurufen. Sehen Sie sich meine Antwort für Caching und Verkettung an. –

0

versuchen, etwas wie unten,

Edit: Cached Eingabetextfelder.

DEMO

var dummyValues = [['dummy1', 'dummy2'], ['dummy3', 'dummy4']]; 

var $loginInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Login1]'); 
var $pwdInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Password]'); 

$('#paymentDD').change(function() { 
    var selectedVal = parseInt($(this).val(), 10) - 1; 
    $loginInput.val(dummyValues [selectedVal][0]); 
    $pwdInput.val(dummyValues [selectedVal][1]); 
}); 

Aktualisiert dummyValues var, wie Sie bewegen Optionen der Dropdown hinzuzufügen.

0

Ich bin ein Fan von Caching-Elementen wann immer möglich, also das ist, was ich tue. Ich habe auch gesehen, dass Sie die neueste jQuery (1.7.2) in Ihrem jsFiddle verwenden, warum also nicht die empfohlene .on() Methode verwenden und dann eine sofortige .change() aufrufen, um unter Last zu füllen?

You could try something like this:

var $span = $('span#print_pagename'), 
    $login = $('input[name="Check_Config_PaymentGateway_CreditCards_Login1"]'), 
    $password = $('input[name="Check_Config_PaymentGateway_CreditCards_Password"]'), 
    $select = $('<select><option id="1">1</option><option id="2">2</option></select>'); 

$span.after($select); 

$select.on('change', function() { 

    var $this = $(this); 

    if ($this.val() === '1') { 

     $login.val('dummy1'); 
     $password.val('dummy2'); 

    } else if ($this.val() === '2') { 

     $login.val('dummy3'); 
     $password.val('dummy4'); 

    } 

}).change(); 
Verwandte Themen