CODEWITHSUNDEEP
javascriptjquery
Brandon
Brandon

Reputation: 1195

Could someone explain the jquery .select() method?

I've looked at the docs and I'm having trouble other finding information on this method, I think it handles an event where text is added or changed in a text input or text area. however, cant get it to work. I'm hoping someone can further explain this event handler to me.

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

Upvotes: 2

Views: 166

Answers (4)

Scott Marcus
Scott Marcus

Reputation: 65835

You are misunderstanding the select method. It is used when text in an input element is selected. Your comments indicate that you want the code to be triggered when something is typed.

For that, you should use the input event if you want to trigger a function when input is received in the element.

Also, your function didn't include a # in front of the second reference, so you were not correctly accessing that element.

$("#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">

Upvotes: 1

中国程序员
中国程序员

Reputation: 7

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

Upvotes: 1

KevBot
KevBot

Reputation: 18908

$.select() works when you select text inside of a text or textarea element. Meaning when you "highlight" text with the mouse. Try it below:

$("#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">

If you want to hook into additions, you can use something like jquery's on input instead:

$("#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">

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Based on the official documentation of jquery for .select(), here's definition for what it does and an example to demonstrate.

Official Description

Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

which means you are trying to do some operation of targeted element when you select text in source element. Watch out the comments for what it's doing.

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

Upvotes: 2

Related Questions