Question

这是我的代码。这是我的文字字段。它可以超过1套。在示例中，我有3套。

<DIV class="product-item float-clear">
<DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>
</DIV>

这是我的Jquery。

 var inputs = document.getElementsByClassName('webcampics'),
                names = [].map.call(inputs, function (input) {
            return input.value;
        }).join('|');

输出结果为：

a@mail.com |ÿ| b@mail.com |ÿ| c@mail.com |ÿ

预期输出为：

a@mail.com |ý; b@mail.com |ý; c@mail.com |ÿ

Answer 1

使用nodeName检查输入要添加新字符的位置并进行字符串连接。

names = [].map.call(inputs, function (input) {
     var tempStr =  input.value;
     if(input.nodeName == "SELECT")
     {
         tempStr += ";";
     }
     return tempStr;
}).join('|');

仅供参考，您也可以使用each()来实现相同目标。

＆＃13;

$('button').click(function(){

var inputs = document.getElementsByClassName('webcampics'),
    
names = [].map.call(inputs, function (input) {
            var tempStr =  input.value;
            if(input.nodeName == "SELECT")
            {
              tempStr += ";";
            }
            else
            {
              tempStr += "|";  
            }
            return tempStr;
        }).join("");
console.log(names);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV class="product-item float-clear">
<DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>

  <DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>
  
</DIV>
<button>GET OUTPUT</button>

＆＃13;

Answer 2

以下代码将为您提供所需的输出。您可以使用input元素的node name属性来实现此目的。

JS：

$(document).ready(function(){
var names ="";
$('.button').bind('click', function(){
var inputs = document.getElementsByClassName('webcampics'),
names = [].map.call(inputs, function (input) {
     var values =  input.value;
     if(input.nodeName == "SELECT")
     {
         values += ";";
     }
     return values;
}).join('|');
console.log(names);

})

})

HTML：

<body>

    <DIV class="product-item float-clear">
<DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>
</DIV>

<input type="button" class="button" value="submit">
</body>

组合来自多个字段的文本字段集

2 个答案: