Using jquery to create an interactive menu, based on an array of user input

Question

I have created a webpage that allows a user to update multiple iframes based on their input in a text box. I'd like to extend the functionality of this page to allow the user to enter multiple values at once.

These values would be separated by a new line, I would like to display all the values in some kind of side bar menu and I would like the user to be able to select values by clicking them and/or cycle through values by "next" or "previous" buttons.

This is how the current page is working:

<input type="text" id="user">

<iframe id="frame1" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame2" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame3" width="450px" height="880px" src="" frameborder=0></iframe>

<div class="button">Submit</div>

// Clicks submit button if enter key is pressed
$("#user").keyup(function(event){
  if(event.keyCode == 13){
    $(".button").click();
  }
});

// If submit button is pressed, update iframes with contents of text box 
$(".button").click(function(){
    $('#user').val(function(n,c){
       $('#frame1').attr('src', "url" + c);
       $('#frame2').attr('src', "url" + c);
       $('#frame3').attr('src', "url" + c);
       $('#user').attr('value',c);
       return c
    });
});

From what I understand, I'd need to add the user input to an array by splitting the values based on new line, as described here . Then display them using something like what's described here .

What I'm really struggling with is how to then get these array values into some kind of sidebar menu that the user can interact with. Hopefully if I can do that, I can just use click handlers to update the iframes.

Any help would be greatly appreciated, thanks!

Answer 1

Maybe something like this:

http://fiddle.jshell.net/a1qzdk3a/1/

Hope it helps... =) Give feedback!

            var myarray = $('#myTextArea').val().split("\n");