2017-02-01 1 views
2

Ich habe mir die Dokumente angeschaut und ich habe Probleme, andere Informationen zu dieser Methode zu finden. Ich denke, es behandelt ein Ereignis, bei dem Text in einer Texteingabe oder einem Textbereich hinzugefügt oder geändert wird. kann es aber nicht zur Arbeit bringen. Ich hoffe, dass mir jemand diesen Event-Handler näher erklären kann.Kann jemand die jquery .select() Methode erklären?

<input id="first" type="text">// if something is typed here an event should be triggered 
     //at least if my understanding is correct which it clearly isnt 
<input id="second" type="text">//hello should appear here when the event is triggered 

<script> 
     $("#first").select(function(){$("#second").val("hello")})//this does nothing 
</script> 
+4

* * ['Dies ist ein Offizielle Informationen über .select() '] (https://api.jquery.com/select/) ** –

+3

Sie haben einige Syntaxfehler. Sehen Sie sich Ihre Konsole an, um sie zu sehen (klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf Element prüfen). Laden Sie die Seite neu und Sie werden Fehler sehen. –

+2

Sonst sollte es wie erwartet funktionieren. Das Ereignis wird ausgelöst, wenn Sie Text in dem Textfeld auswählen, nicht wenn Sie nur Text eingeben. Außerdem sollten Sie in Ihrem JavaScript-Code ein Hash-Zeichen vor "Sekunde" setzen. Es sollte so sein: '$ (" # first "). Select (function() {$ (" # second "). Val (" hallo ");});' –

Antwort

1

$.select() funktioniert, wenn Sie Text innerhalb eines Textes oder Textbereich Element auswählen. Bedeutung, wenn Sie Text mit der Maus "markieren". Versuchen Sie es unter:

$("#first").select(function() { 
 
    $("#second").val("hello"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>First:</div> 
 
<input id="first" type="text" value="select this text"> 
 
<div>Second:</div> 
 
<input id="second" type="text">

Wenn Sie in Ergänzungen Haken möchten, können Sie on input etwas wie jQuerys stattdessen verwenden können:

$("#first").on('input', function() { 
 
    $("#second").val("hello"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>First:</div> 
 
<input id="first" type="text"> 
 
<div>Second:</div> 
 
<input id="second" type="text">

1

Sie missverstehen die select Methode. Es wird verwendet, wenn Text in einem Eingabeelement ausgewählt ist. Ihre Kommentare zeigen an, dass der Code ausgelöst werden soll, wenn etwas getippt wird.

Dazu sollten Sie das Ereignis input verwenden, wenn Sie eine Funktion auslösen möchten, wenn die Eingabe im Element empfangen wird.

Außerdem enthielt Ihre Funktion keinen # vor der second Referenz, so dass Sie nicht korrekt auf dieses Element zugegriffen haben.

$("#first").on("input", function(){ 
 
    $("#second").val("hello") 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="first" type="text"> 
 
<input id="second" type="text">

2

Basierend auf dem official documentation of jquery for .select(), hier Definition für das, was sie tut und ein Beispiel zu demonstrieren.

Offizielle Beschreibung

Bind ein Event-Handler auf die "select" JavaScript-Ereignis oder auslösen dieses Ereignis auf einem Element.

was bedeutet, dass Sie versuchen, einige Operation des Zielelements zu tun, wenn Sie select Text in Quellelement. Achte auf die Kommentare für das, was es macht.

//always good to wrap events inside document.ready 
 
$(function() { 
 
    $("#first").select(function() { 
 
    //once you perform select operation on input#first element either by Ctrl+a 
 
    //or by Mouse drag event 
 
    $("#second").val("hello"); 
 
    //value of input#second element should be updated to hello 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="first" type="text"> 
 
<input id="second" type="text">

1
<body> 
<input id="first" type="text"> 
<input id="second" type="text"> 
<script> 
$("#first").change(function() { 
    $("#second").val("hello") 
}) 
</script> 
</body> 
Verwandte Themen