基于用户输入数组，使用jquery创建交互式菜单

Question

我创建了一个网页，该网页允许用户根据其在文本框中的输入来更新多个iframe。 我想扩展此页面的功能，以允许用户一次输入多个值。

这些值将用新行分隔，我想在某种侧边栏菜单中显示所有值，并且我希望用户能够通过单击它们来选择值和/或通过“下一步”循环显示值。或“上一个”按钮。

当前页面的工作方式如下：

<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
    });
});

据我了解，我需要通过拆分基础上新的生产线的值用户输入添加到一个数组，描述在这里 。 然后使用此处描述的内容显示它们。

我真正在挣扎的是如何将这些数组值放入用户可以与之交互的某种侧边栏菜单中。 希望我能做到这一点，我可以使用点击处理程序来更新iframe。

任何帮助将不胜感激，谢谢！

Answer 1

也许是这样的：

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

希望对您有帮助... =）提供反馈！

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