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

テスト用の簡単な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 += '• <b>' + name[i] + '</b> ';
// button
html += ' <span class="btn" id="btn' + i + '" onclick="btnClick(' + i + ')">[Add]</span>';
}
}
if (html == '') html = ' ';
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 "
次に、このコードを編集して、ニーズに合うようにします。そのままシンプル。
お役に立てれば