Question

我有一个普通的div，有一个可以手动编辑的输入文本框。我想从另一个拥有一组php数组值的div（从查询中）添加/删除php值。每个值都有一个[添加]或[删除]按钮，该按钮基于天气，输入文本字段中是否存在相应的php值。

因此，基本上如果文本框为空，则所有按钮将为[添加]并单击它将相应的php值添加到文本框，然后更改为[删除]按钮。同样，任何[Remove]按钮都会从文本框中删除相应的php值，然后更改为[Add]按钮。

示例：
$ values = array（“ Mike ”，“ James ”，“ Jerry ”，“汤姆“）;
输入类型=”文字“

如果我手动对文本框进行任何更改或在其中输入一些已知的php值（用分号分隔）：

詹姆斯;麦克;海德;杰里;

另一个div将动态搜索php数组的所有值，并为存在的那些添加[Remove]按钮，并为文本框中找不到的人添加[Add]按钮。

詹姆斯[删除]
迈克[删除]
汤姆[添加]
杰瑞[删除]

注意＃1：此处，' Tom '是唯一不存在的值   文本框，因此它有一个[删除]按钮。
注意事项＃2：另外，'海德'   不知道是php数组的值，所以它既没有[Add]   也没有[删除]按钮。

修改

我已经做过的，基本上是从php查询中回显所有数组值并使用[Add]按钮附加每个值（因为文本框默认为空）
我使用自定义js函数similer来：

$（“＃textbox”）。val（function（i，val）{return val.replace（phparrayvalue，''）; }）;

但是，为了动态更改[Add]和[Remove]之间的按钮，我将不得不一直保持php数组（AJAX请求将很慢获得php值ontextchange）。

我认为如果我可以将php数组转换为javascript一个 onload，问题就会消失。之后，很容易将保存的js数组与文本框值ontextchange进行比较，并根据结果更改按钮。

我希望很清楚，有人可以帮助使用javascript代码谢谢

Answer 1

对于你想要做的事情，你有没有考虑过“选择”？这是一个链接： http://harvesthq.github.com/chosen/

虽然你会以更优雅的方式，但是你会谨慎地做你正在尝试做的事情。您可以将PHP数组中的名称列表传递给插件，它可以处理其余部分。

Answer 2

如果我理解你的问题，这可能会有所帮助

预览：

enter image description here

创建简单的html文档进行测试..

的test.html

<!DOCTYPE html>
<html>
  <head>
  <title>Test Add/Remove</title>
  <script type="text/javascript" src="adddel.js"></script>
  <style type="text/css">
  <!--
  body { font-family: tahoma, verdana, arial; }
  .btn { color: #0000ff; font-size: 12px; cursor: pointer; }
  .div1 { width: 200px; height: 200px; background-color: #ffffee; border: dashed 1px #494949; position: absolute; left: 50px; top: 50px; padding: 10px; }
  .div2 { width: 200px; height: 200px; background-color: #ffffee; border: dashed 1px #494949; position: absolute; left: 280px; top: 50px; padding: 10px; font-size: 14px; }
  .myinput { width: 194px; font-weight: bold; font-size: 14px; border: solid 1px #000000; padding: 3px; }
  -->
  </style>
</head>
<body>
  <div id="divinput" class="div1"></div>
  <div id="divvalues" class="div2"></div>
  <script type="text/javascript">
  <!--
  // echo next line from php code
  myArray = 'Mike,James,Jerry,Tom';

  jsStart(myArray, 'divinput', 'divvalues');
  -->
  </script>
</body>
</html>

您可以看到，此html包含标题，链接到外部 JavaScript 文件，以及 HEAD中的页面元素的样式 部分，两个 DIV 以及 BODY 部分中的一些简单的页面JavaScript 。

您所要做的就是从PHP代码创建JavaScript变量 myNames 。我使用了你提到的相同名字，所以我的行看起来像这样：

myArray = 'Mike,James,Jerry,Tom';

在PHP中创建以逗号分隔的列表，并在此处 echo 。

在该行的后面我调用了函数 jsStart（），它在外部JavaScript文件 adddel.js 中定义。

让我们看看该文件是怎样的

adddel.js

var name = Array();

// page preparation
function jsStart(a, div1id, div2id) {
  // create array of names
  name = a.split(',');
  // create div1 html
  html = '<input type="text" name="myedit" id="myedit" class="myinput" value="" onchange="changeText()" onkeyup="changeText()">';
  document.getElementById(div1id).innerHTML = html;
  // create div2 html
  html = '';
  for (i=0; i<name.length; i++) {
    if (name[i].trim() != '') {
      if (html != '') html += '<br />';
      // name
      html += '&bull; <b>' + name[i] + '</b> ';
      // button
      html += ' <span class="btn" id="btn' + i + '" onclick="btnClick(' + i + ')">[Add]</span>';
      }
    }
  if (html == '') html = '&nbsp;';
  document.getElementById(div2id).innerHTML = html;
  changeText();
  }

// fires on input-text change
function changeText() {
  edl = document.getElementById('myedit').value.trim().split(';'); 
  for (i=0; i<name.length; i++) {
    btnText = '[Add]';
    for (j=0; j<edl.length; j++) {
      ne = name[i].trim().toLowerCase();
      nl = edl[j].trim().toLowerCase();
      if (ne == nl) {
        btnText = '[Remove]';
        break;
        }
      }
    document.getElementById('btn' + i).innerHTML = btnText;
    }
  }

// add/remove name from text-input
function btnClick(id) {
  ne = name[id].trim().toLowerCase();
  edl = document.getElementById('myedit').value.trim().split(';'); 
  newed = '';
  found = false;
  for (i=0; i<edl.length; i++) {
    nl = edl[i].trim().toLowerCase();
    if (nl != '') {
      if (nl != ne) newed += edl[i].trim() + ';';
      else found = true;
      }
    }
  if (!found) newed+=name[id]+';'
  document.getElementById('myedit').value = newed;
  changeText();
  }

将两个文件放在同一目录中，然后从浏览器中打开 test.html 文件。如果你做对了，你的帖子顶部就会出现类似图片的内容。

注意：text-input中的项不区分大小写，并且允许在名称周围添加其他空格。

这意味着文字

"Mike;John;Sam; BRian"

与

相同

"   mike ; john;Sam;Brian "

现在编辑此代码并使其符合您的需求。虽然很简单。

在2个div之间传输（添加/删除）php数组值

修改

2 个答案:

预览：

的test.html

adddel.js

希望这有帮助