1

手動で編集できる入力テキストボックスを持つ通常のdivがあります。（クエリからの）php配列値のセットを持つ別のdivからphp値を追加/削除したい。各値には [追加] または [削除] ボタンがあり、対応する php 値が入力テキスト フィールドに存在するかどうかに基づいています。

したがって、基本的にテキストボックスが空の場合、すべてのボタンが [追加] になり、クリックすると、対応する php 値がテキストボックスに追加され、[削除] ボタンに変わります。同様に、[削除] ボタンは、対応する php 値をテキスト ボックスから削除し、[追加] ボタンに変わります。

例:
$values = array(" Mike ", " James ", " Jerry ", " Tom ");
入力タイプ="テキスト"

テキストボックスに手動で変更を加えた場合、またはいくつかの既知の php 値を入力した場合 (セミコロンで区切って):

ジェームズ;マイク;ハイド;ジェリー;

もう 1 つの div は、php 配列のすべての値を動的に検索し、存在するものには [削除] ボタンを追加し、テキスト ボックスに見つからなかったものには [追加] ボタンを追加します。

James [削除]
Mike [削除]
Tom [追加]
Jerry [削除]

注意 #1: ここで、' Tom ' はテキスト ボックスに存在しない唯一の値であるため、[削除] ボタンがあります。
注意 #2: また、' Hyde ' は php 配列の値として認識されていないため、[追加] ボタンも [削除] ボタンもありません。

編集：

私がすでに行ったことは、基本的にphpクエリからすべての配列値をエコーし​​、[追加]ボタンでそれぞれを添付することです（テキストボックスはデフォルトで空であるため）
。

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

しかし、[追加] と [削除] の間でボタンを動的に変更するには、常に php 配列を保持する必要があります (AJAX リクエストは、テキスト変更時に php 値を取得するのに時間がかかります)。

PHP配列を渡してjavascriptに変換できれば、問題はなくなると思います。その後、保存された js 配列をテキストボックスの値 ontextchange と比較し、結果に基づいてボタンを変更するのは簡単です。

それが明確で、誰かがJavaScriptコードを手伝ってくれることを願っています.
ありがとうございました

4

2 に答える 2

0

あなたがやろうとしていることについて、あなたは「選ばれた」と考えましたか？これへのリンクは次のとおりです：http： //harvesthq.github.com/chosen/

はるかにエレガントな方法ではありますが、あなたがやろうとしていることを正確に行うことはあなたを愛します。PHP配列からプラグインに名前のリストを渡すことができ、残りはプラグインが処理できます。

于 2012-08-13T03:55:34.933 に答える
0

私があなたの質問を正しく理解していれば、これは役立つかもしれません

プレビュー：

ここに画像の説明を入力してください

テスト用の簡単な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部分のページ要素のスタイル、およびBODY部分の2つの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 に答える