javascript - JS - PHP - 根据特定 HTML 标记的值构建数据数组

标签 javascript php html

我有一个表单,用户可以使用自动完成输入标签方法(类似于问题提交过程中的 Stackoverflow 标签输入)插入文本字段的值。它会立即构建一个类似于以下内容的 HTML div:

<div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <option value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected">Flower</option>
    <option value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected">Animal</option>
    <option value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected">Tiger</option>
    ...
</div>

<div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <input value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected" />
    <input value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected" />
    <input value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected" />
    ...
</div>

我的问题是如何根据 optioninput 标签(即 Flower、Animal、Tiger)的值构建一个数据数组并将该数组发送到在将数据插入数据库之前要进一步处理的 PHP 文件(或不同的 URL)?感谢您的帮助。

最佳答案

您可以设置一个数组,然后循环遍历您的选项,将每个值推送到数组。您必须使用 AJAX 将数组发送到 php。

var nw = document.getElementById('new-words'),
  options = nw.children,
  toPhp = [];

function loops(items, fn, onLoopComplete) {
  var i;
  try {
    if (items && items.length) {
      i = items.length;
    } else {
      throw new Error(items + ' is required to have a length');
    }

    if (i > -1) {
      do {
        if (items[i] !== undefined) {
          fn(i);
          /* console.log(i + ' is the current iteration'); */
        }
      }
      while (--i >= 0);
    }
    if (typeof onLoopComplete === 'function') {
      onLoopComplete(items.length);
    }
  } catch (e) {
    throw new Error(e);
  }
}

loops(options, function(i) {
  toPhp.push(options[i].value);
});


alert(toPhp);
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Example</title>
</head>

<body>

  <div name="new-words[]" id="new-words" multiple="multiple" class="hidden">
    <option value="Flower" id="newWord_H0uTTbUsLW8R3fSpfMw16JnvpVQ9zhdW" class="selected" selected="selected">Flower</option>
    <option value="Animal" id="newWord_ZxFWGZrgDcCd2nUMpz1mc1ssVLAXgIVw" class="selected" selected="selected">Animal</option>
    <option value="Tiger" id="newWord_ZxFWGZrgDjijms23mmoAOPPL009AOOOO" class="selected" selected="selected">Tiger</option>
    ...
  </div>
</body>

</html>

关于javascript - JS - PHP - 根据特定 HTML 标记的值构建数据数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30448924/

相关文章:

javascript - 图像周围的圆形进度条

php - eval() 代码中的意外 $end

PHP:UPLOAD_ERR_INI_SIZE 的意义何在?

javascript - 隐藏/显示元素

html - 通过覆盖超链接使背景图像可点击?

javascript - 修改 JavaScript 以使用 ASCII 字符或图像而不是文本

javascript - 使用 jQuery 插入和删除多个 div

html - Golang 的 "html/template"包中的 HTML() 函数出现问题

javascript - AngularJs如何防止&lt;script&gt;标签被输入

javascript - skygear/react-chat-demo app.html 不起作用