donglu9898 2012-08-12 18:17
浏览 23
已采纳

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

I have a normal div, having an input textbox which can be edited manually. I want to add/remove php values from another div having a set of php array values (from a query). Each value have an [Add] or a [Remove] button that is based on weather the corresponding php value exists in the input text field or not.

So, basically if the textbox is empty, then all the buttons will be [Add] and clicking it will add the corresponding php value to the textbox, and then change into a [Remove] button. Likewise, any [Remove] button will remove the corresponding php value from the textbox, and then change into an [Add] button.

EXAMPLE:
$values = array("Mike", "James", "Jerry", "Tom");
input type="text"

If I manually made any changes to the textbox or entered some known php values into it (separated by a semi-colon):

James;Mike;Hyde;Jerry;

The other div will dynamically search for all the values of the php array and add a [Remove] button for the ones that exist, and an [Add] button for those who were not found in the textbox.

James [Remove]
Mike [Remove]
Tom [Add]
Jerry [Remove]

Notice #1: Here, 'Tom' is the only value that do not exist in the textbox, so it has a [Remove] button.
Notice #2: Also, 'Hyde' is not known as a value of the php array, so it has neither an [Add] nor a [Remove] button.

Edit:

What I already did, is basically echo all array values from the php query and attach each with an [Add] button (since the textbox is empty by default)
I'm using custom js functions similer to:

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

But, in order to dynamically change the buttons between [Add] and [Remove], I'll have to keep the php array all the time (AJAX requests will be slow to get the php values ontextchange).

I think the problem would vanish if I could pass and convert the php array into a javascript one onload. After that it would be easy to compare the saved js array with the textbox value ontextchange, and change buttons based on the result.

I hope it is clear and someone can help with the javascript code.
Thank you

  • 写回答

2条回答 默认 最新

  • douqiang4501 2012-08-14 03:21
    关注

    If I properly understood your question, this may help

    Preview:

    enter image description here

    Create simple html document for testing..

    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>

    Like you can see, this html contains title, link to external JavaScript file and some style for page elements in HEAD part, and two DIVs and some simple on-page JavaScript in BODY part.

    All you have to do is to create JavaScript variable myNames from PHP code. I've used same names you mentioned in question so my line looks like this:

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

    Create comma-separated list in PHP and echo it here.

    Behind that line I called function jsStart() which is defined in external JavaScript file adddel.js.

    Let see how that file looks like

    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();
  }

    Place both files in same directory and open test.html file from your browser. If you did it right you'll have something like picture at the top of my post.

    Note: items in text-input are case-insensitive and additional spaces around names are allowed.

    That means text 

    "Mike;John;Sam; BRian"

    is same as

    "   mike ; john;Sam;Brian "

    Now edit this code and make it fits your needs. Simple as it is.

    Hope this helps

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了
  • ¥50 切换TabTip键盘的输入法
  • ¥15 可否在不同线程中调用封装数据库操作的类