1

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

所以，基本上如果文本框是空的，那么所有的按钮都会是[添加]，点击它会将相应的php值添加到文本框，然后变成一个[删除]按钮。同样，任何 [Remove] 按钮都会从文本框中删除相应的 php 值，然后变为 [Add] 按钮。

示例：
$values = array(" Mike "、" James "、" Jerry "、" Tom ");
输入类型="文本"

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

詹姆斯;迈克;海德;杰瑞;

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

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

注意#1：这里，' Tom ' 是文本框中唯一不存在的值，所以它有一个 [Remove] 按钮。
注意#2：另外，' Hyde ' 不是 php 数组的值，因此它既没有 [Add] 也没有 [Remove] 按钮。

编辑：

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

$("#textbox").val(function(i, val) { return val.replace(phparrayvalue, ''); });

但是，为了动态更改 [Add] 和 [Remove] 之间的按钮，我必须一直保留 php 数组（AJAX 请求在获取 php 值 ontextchange 时会很慢）。

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

我希望它很清楚，有人可以帮助处理 javascript 代码。
谢谢

4

2 回答 2

0

对于您正在尝试做的那种事情，您是否考虑过“选择”？这是它的链接：http: //harvesthq.github.com/chosen/

它会喜欢你做你想做的事情，尽管以一种更优雅的方式。你可以将你的名字列表从你的 PHP 数组传递到插件中，它可以处理其余的事情。

于 2012-08-13T03:55:34.933 回答
0

如果我正确理解了您的问题，这可能会有所帮助

预览：

在此处输入图像描述

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

测试.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部分中页面元素的一些样式，以及BODY部分中的两个DIV和一些简单的页面 JavaScript。

您所要做的就是从 PHP 代码创建 JavaScript 变量myNames 。我使用了您在问题中提到的相同名称，因此我的行如下所示：

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

在 PHP 中创建逗号分隔的列表并在此处回显。

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

让我们看看该文件的样子

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文件。如果你做得对，你会在我的帖子顶部有类似图片的东西。

注意：文本输入中的项目不区分大小写，并且允许名称周围有额外的空格。

这意味着文本

"Mike;John;Sam; BRian"

和

"   mike ; john;Sam;Brian "

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

希望这可以帮助

于 2012-08-14T03:21:40.733 回答