开发者

Pass a li tag value to a text input

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 开发者_Python百科tried does not work thank you


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.net/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.net/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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜