javascript - Pass a li tag value to a text input - Stack Overflow

admin管理员组

文章数量:1277290

hi I have a li tag as follows:

<li value="myLi" class="myLi">My element</li>

I tried this jquery code:

$(".myLi").click(function(){
    document.getElementById("mytext").value=$(this).value;
});

knowing that mytext is an input of type text, how can I pass the value of the li tag to the input , if it's not possible, how can I use the innerHTML to pass the code between the li tags.

the code that I tried does not work thank you

hi I have a li tag as follows:

<li value="myLi" class="myLi">My element</li>

I tried this jquery code:

$(".myLi").click(function(){
    document.getElementById("mytext").value=$(this).value;
});

knowing that mytext is an input of type text, how can I pass the value of the li tag to the input , if it's not possible, how can I use the innerHTML to pass the code between the li tags.

the code that I tried does not work thank you

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 10, 2010 at 22:07 Brad Mace 27.9k1818 gold badges109109 silver badges152152 bronze badges asked Dec 10, 2010 at 22:05 SmootQSmootQ 2,12277 gold badges3535 silver badges5959 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Despite what some have said, value is indeed a valid attribute for li elements, and it's reflected in the value property, but it's required to be an integer (reference):

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.
...
If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value.

If your pasted code was just a quick edit and you really will be using an integer, then your code would work if you didn't wrap this in a jQuery instance:

HTML:

<li value="3" class="myLi">My element</li>

JavaScript using jQuery:

$(".myLi").click(function(){
    document.getElementById('myText').value=this.value;
    // Or
    // $('#myText').attr('value', this.value);
});

If you want to use a string, probably best to stick with the new HTML5 data- prefix:

HTML:

<li data-value="myLi" class="myLi">My element</li>

JavaScript using jQuery:

$(".myLi").click(function(){
    document.getElementById('myText').value=$(this).attr('data-value');
    // Or
    // $('#myText').attr('value', $(this).attr('data-value'));
});

AFAIK value is not valid attribute for li elements. (Not entirely true, see @T.J. Crowder's answer)
You can use rel though:

<li rel="myLi" class="myLi">My element</li>

And to set the value of the input element, use val():

$(".myLi").click(function(){
    $("#mytext").val($(this).attr('rel'));
});

If you want to get the text from the li element instead, use $(this).text().

Reference: attr, text

Try the following

$(".myLi").click(function() {
  $("#myText").val($(this).text());
});

I think what you want is this:

$(".myLi").click(function(){
    $('#mytext').val($(this).text());
});

Here's a demo of that: http://jsfiddle/Ender/QdWxH/

Or if you wanted the val from that value attribute: As Felix points out, value isn't a valid attribute of <li>. (See @T.J. Crowder's answer) You could change that to data-value, like so:

<li data-value="myLi" class="myLi">My element</li>

Then do this:

$(".myLi").click(function(){
    $('#mytext').val($(this).data('value'));
});

Demo of that: http://jsfiddle/Ender/BHrmR/

You can use global attribute 'title' for quick and easy.

<li title="myLi" class="myLi">My element</li>

then

$(".myLi").click(function(){
    document.getElementById('myText').value=this.attr('title');
});

Hope this help.

本文标签： javascriptPass a li tag value to a text inputStack Overflow