提交前在另一个 div 中显示的逗号分隔输入答案

【问题标题】：comma-separated input displayed in another div prior to submission提交前在另一个 div 中显示的逗号分隔输入
【发布时间】：2012-06-15 14:32:15
【问题描述】：

我正在尝试允许用户在输入字段中输入多个用逗号分隔的 id #。然后，我想获取该输入，用逗号分隔数据并将它们插入单独的<li> 标签中，以便在提交之前显示在另一个 div 中（用于验证目的）。到目前为止，这是我所做的...请温柔...我以前不必这样做。

if ($("#" + prodID).find("input.text").val() == value) {
   $("#" + prodID).find("input.text").val("");
}

这是我到目前为止的地方，不知道从那里去哪里。我相信我需要将replaceWith() 添加到.val(""); 的末尾，但我不确定。如果有例子我可以看看，我相信我能弄清楚。

非常感谢任何帮助。

这里是 HTML。（对不起，我一开始错过了）

<div id="selCodes">
<p>Your selected codes <span><a href="#">Clear</a></span></p>
  <ul>
      <li><!--inserted by clicking "okay"-->
          Some Account - 0123<a href="#" title="delete"><img alt="delete" src="imgs/delete.png"></a>
      </li>
  </ul>
  <button id="subCodes">Submit</button>
</div><!-- /#my-selections -->

<h4>Narrow results by</h4>

<div id="prodId">
  <a href="#">Item code</a>
    <span><a href="#">Clear</a></span>        
    <p>Choose item from dropdown. Type code or codes, (separated by comma), and click the add button to create filters.</p>
        <select id="code-type">
            <option>Prod code</option>
            <option selected="selected">Prod UPC</option>
            <option>Master UPC</option>
            <option>CC</option>
        </select>            
        <input type="text" value="" />  
        <button>OK</button>
</div>

我有一种奇怪的感觉，我离基地很远。

【问题讨论】：

您问题中的代码与问题不匹配！该代码正在比较 2 个值 (val() == value) ...问题是关于获取逗号分隔值并创建 li 元素 ...也许您可以向我们展示当前的 HTML 和脚本后的预期 HTML 输出运行
你也能显示你的html吗？

标签： jquery

【解决方案1】：

这是DEMO

代码如下：

$('#separate').on('keyup',function(){
   var splitter = $('#separate').val().split(',');  
   var htmlToAdd='';
   for (i=0; i<splitter.length; i++)
   {
       htmlToAdd += '<li>'+splitter[i]+'</li>';
   }
   $('#results').html(htmlToAdd);
});

我在我的demo中使用了你的html，稍作修改，在输入框添加了一个id，在底部添加了一个验证结果div。

【讨论】：

非常好...我唯一的问题是，当按下“确定”按钮时，代码需要进入顶部 div。在他们确认该列表后完成验证。
我遇到了一个问题，即需要单击按钮两次才能触发该功能......这可能是什么原因造成的？
不看代码就不敢说实话。你至少有一个小提琴或sn-p吗？
还没有……抱歉。奇怪的请求...如果我需要获取该拆分器 [1] 数组并使用其中的信息填充 html 的另一个区域怎么办？例如，要求将这些值用作每个
的 ID。如果拆分的数字是 98765，那么
的 ID 将是相同的。我们可以将一个数组中的信息用于另一个数组吗？

我猜你的意思就像htmlToAdd += '<li id='+splitter[i]+'>' + splitter[i]+'</li>';

【解决方案2】：

您可以使用[value=somevalue]的属性匹配
而不是写这个

if ($("#" + prodID).find("input.text").val() == value) {
    $("#" + prodID).find("input.text").val("");
}

$("#" + proID + " input:text[value="+value+"]").val('');

查看示例here

【讨论】：

【解决方案3】：

这假设您想在输入值更改时随时更新，并且您的验证 ul 的 id 为 verify：

$('#'+prodId).find('input:text').change(function(e){
   var $this = $(this),
       value = $this.val(),
       values,
       $verify = $('ul#verify'),
       verifyHTML = '';
   if(value) {
       if (value.indexOf(',') != -1) {
         values = value.split(',');
       } else {
         values = [value];
       }

       for (var i = 0; i < values.length; i++) {
         verifyHTML += '<li>'+values[i]+'</li>';
       }

       $verify.html(verifyHTML);
   }
});

【讨论】：

【解决方案4】：

我从问题中的文字假设您的意思是这样的（这里没有检查只是显示值 - 我可能与您的要求相去甚远）->

$(function() {
    $('input[type=button]').click(function() {
        var inputs_to_check = $('#check').val();
        var array_to_check = inputs_to_check.split(',');
        $.each(array_to_check,function(index,value) {
            $('#output').append('<li>' + value + " = " + $('#'+value).val() + "</li>");
        })
    });
});

这会从input (#check) 中获取一些文本，其中包含要检查的ids 的input 元素的逗号分隔列表。然后，它拆分值并循环遍历它们 ($.each())，然后创建包含 id 的 input 选中的 li 元素及其 value (.val())

HTML 看起来像这样：

inputs :<br>
<input id="test1" value="1234"/><br>
<input id="test2" value="5678"/><br>
Output to check : <input id="check"/> <input type="button" value="check"/>
<div>
    <ul id="output"></ul>
</div>

Working example here

【讨论】：

实际上，我希望用户可以在一个输入文本框中输入多个代码，例如“code1，code2，code3”，然后在div中显示。
@Amidude 这正是代码的作用——在我的示例中输入test1,test2 并单击check——它将输出一个li，其中包含输入的ID，后跟它的值
@Amidude 请注意，您还应该阅读此内容->meta.stackexchange.com/questions/5234/…
非常感谢大家的帮助...我现在唯一遇到的问题是该按钮需要点击 2 次才能工作。
@amidude 你用的是什么代码？？？将其添加到您的问题或创建jsfiddle.net

【解决方案5】：

不确定这是不是你的意思：

DEMO

html:

<input id="input1" />
<ul id="ul1"></ul>

jquery:

$('#input1').on('keyup', function() {
    var textIn = $(this).val();
    var idArr = textIn.split(',');
    $('li', '#ul1').remove();
    $.each(idArr, function(i) {
        $('#ul1').append('<li>' + idArr[i] + '</li>');
    });
});

【讨论】：

就是这样。哇...不敢相信我离得太远了。我很感激帮助。我需要阅读更多内容。