www.webdeveloper.com
Results 1 to 2 of 2

Thread: help me with this jquery code

  1. #1
    Join Date
    Jun 2013
    Posts
    33

    help me with this jquery code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#selection li").click(function(){
        var x= $(this).text();
        $("#destiny").append(x);
      });
    });
    </script>
    </head>
    <body>
    <ul id="selection">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    
    </ul>
    <p id="destiny"></p>
    </body>
    </html>

    i have a unordered list and a paragraph. when i click on the text from the lists, it should appear in the paragraph tag (basic selection process).
    Now i want to limit this selection. Means If the selection of list item is already made and we tried to select it again, it should give error(you have already selected item 1/2/3).

    and how can i use list instead of paragraph. I have done this but only "x" gets printed. pls help.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#selection li").click(function(){
        var x= $(this).text();
        $("#destiny").append("<li>'x'</li>");
      });
    });
    </script>
    </head>
    <body>
    <ul id="selection">
    <li>shahrukh</li>
    <li>aamir</li>
    <li>salman</li>
    <li>shahid</li>
    <li>ranbir</li>
    </ul>
    <ul id="destiny"></ul>
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("#selection li").click(function(){
    var x=$(this).text();
    $('#err').empty();
    if(!$(this).hasClass('done')){
    $("#destiny").append('<li>'+x+'</li>');
    $(this).addClass('done');
    }
    else{$('#err').html('You have already selected <b>'+x+'</b>');}
    });
    });
    </script>
    </head>
    <body>
    <ul id="selection">
    <li>shahrukh</li>
    <li>aamir</li>
    <li>salman</li>
    <li>shahid</li>
    <li>ranbir</li>
    </ul>
    <ul id="destiny"></ul>
    <div id="err"></div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles