アプリ版：「スタンプのみでお礼する」機能のリリースについて

動的なセレクトボックスの生成と削除

解決済

  • 質問者：kenpanch7
  • 質問日時：
  • 回答数：3件

CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。
その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。
しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。）

今までに作成したのは以下のとおりです。
**********Javascript***********
var copy;
function addInput() {
copy = document.getElementById('plus')
copy.innerHTML="Filter:

<select name='condition'>
<option value='and'>AND</option>
<option value='or'>OR</option>
</select>

<select onchange='SetSubMenu(value);'>
<option value='Werkstoff'>1.Werkstoff</option>
<option value='Shiftfaktor'>2.Shiftfaktor </option>
<option value='SurfCorr'>3.SurfCorr</option>
</select>
<select name='condition'>
<option value='like'>like</option>
<option value='notlike'>not like</option>
<option value='equal'>=</option>
<option value='<'><</option>
<option value='>'>></option>
<option value='<='><=</option>
<option value='>='>>=</option>
</select>
<div id ='Werkstoff' class='secondpulldown'>
<select><TMPL_LOOP NAME=EINTRAGWERK>
<option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div>
<div id ='Getriebe' class='secondpulldown'>
<select><TMPL_LOOP NAME=EINTRAGETRIEBE>
<option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div>

<input type='button' onclick='addInput()' value='+'>
<input type='button' onclick='delInput()' value='-'>
<div id='plus'></div>"
}

</script>

**********stylesheet*************
<style type="text/css"><!--
.secondpulldown {
display: none;
}
--></style>

<table>
<tr>
<td>Datenbank:</td>
<td colspan="5">
<select name="datenbank">
<option value="bank1">DATEN BANK 1</option>
</select>
</td>
</tr>
<tr>
<td>Filter:</td>
<td>

<select name="condition">
<option value="and">AND</option><option value="or">OR</option>
</select>
</td>
<td>
<select onchange="SetSubMenu(value);">
<option value="Werkstoff">1.Werkstoff</option>
<option value="Shiftfaktor">2.Shiftfaktor </option>
<option value="SurfCorr">3.SurfCorr</option>
</select>

</td>
<td>
<select name="condition">
<option value="like">like</option>
<option value="notlike">not like</option>
<option value="equal">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<="><=</option>
<option value=">=">>=</option>
</select>
</td>
<td>

<div id ="Werkstoff" class="secondpulldown">
<select>
<TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP>
</select>
</div>

<div id ="Getriebe" class="secondpulldown">
<select>
<TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP>
</select>
</div>

</td>
<td>
<input type="button" onclick="addInput()" value="+">
<input type="button" onclick="delInput()" value="-">
</td>
</tr>
<tr>
<td colspan='6'><div id="plus"></div></td>
</tr>

</table>
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： yambejp
  • 回答日時：

ざっくり省いて・・・



追加削除はDOMで行うのが妥当かと。
もしそうじゃないなら、idをうったdivで挟んで、innerHTMLを
消してしまうという荒業もありかと。
さいあく、スタイルシートで表示を消すだけでも削除されたように
みえます

まずはもっと簡単な例から始めることをお勧めします

この回答への補足

コメントありがとうございます。
そうですね。簡単な例から始めたいのですが。
これを作れといわれてしまったので、格闘していました。

しかし、の基本的な知識がまだたりないようです。
書いてある内容や単語は知っているのですが,まだぱっとイメージすることができません。

もし、勉強するのにいいサイト,書籍がありましたら、ご紹介のほどよろしくお願いします.

補足日時：2010/03/16 18:42
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

全体像がわからないけど…



とりあえず、スクリプトは改行を行の区切りとするみたいなので、文字列（add用のHTML）が正しく解釈されません。
また、HTML内でも「<」「>」くらいはエスケープしておいたほうが良いと思いますが？

classがsecondpulldownの要素はどのように利用するのか不明なのとSetSubMenu（）の内容も不明なので良くわかりませんが、増減するのはみな同じ内容だと仮定できるとして、増減のサンプルとして作ってみました。

入力後の処理やformの構成も不明なので、そのあたりは何も配慮していません。
また、tableを利用しているけれど意味がよくわからず、レイアウトのためだけなら不要そうなのではずしています。

あくまで、増減のサンプルとして…
（基本的に「+」ボタンは1箇所でよくって、それぞれには「-」ボタンがあればよさそうな気がするけれど、とりあえず元の雰囲気のままです）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css"><!--
.secondpulldown { display: none; }
ul#datalist { list-style:none; margin:0; padding:0; }
ul#datalist li span { display:inline-block; width:5em; }
--></style>

<script type="text/javascript"><!--
window.onload = function() {
var u = document.getElementById('datalist');
var el = u.getElementsByTagName('LI')[1].cloneNode(true);
el.id = '_Default';
el.style.display = 'none';
u.appendChild(el);
}
function clickFunc(evt) {
var e, t = evt.target || evt.srcElement;
if (t.nodeName != 'INPUT') return;
if (t.value == '+') {
e = document.getElementById('_Default').cloneNode(true);
e.style.display = 'block';
t.parentNode.parentNode.appendChild(e);
} else if (t.value == '-') {
e = t.parentNode;
if (e.parentNode.getElementsByTagName('LI').length > 3) e.parentNode.removeChild(e);
}
}
--></script>
</head>
<body>
<ul id="datalist" onclick="clickFunc(event);">
<li>
<span>Datenbank:</span>
<select name="datenbank">
<option value="bank1">DATEN BANK 1</option>
</select>
</li>
<li>
<span>Filter:</span>
<select name="condition">
<option value="and">AND</option>
<option value="or">OR</option>
</select>
<select>
<option value="Werkstoff">1.Werkstoff</option>
<option value="Shiftfaktor">2.Shiftfaktor</option>
<option value="SurfCorr">3.SurfCorr</option>
</select>
<select name="condition">
<option value="like">like</option>
<option value="notlike">not like</option>
<option value="equal">=</option>
<option value="&lt;">&lt;</option>
<option value="&gt;">&gt;</option>
<option value="&lt;=">&lt;=</option>
<option value="&gt;=">&gt;=</option>
</select>
<select class="secondpulldown">
<option value="&lt;TMPL_VAR NAME=WERKSTOFF&gt;">&lt;TMPL_VAR NAME=WERKSTOFF&gt;</option>
</select>
<select class="secondpulldown">
<option value="&lt;TMPL_VAR NAME=GETRIEBE&gt;">&lt;TMPL_VAR NAME=GETRIEBE&gt;</option>
</select>
<input type="button" value="+">
<input type="button" value="-">
</li>
</ul>
</body>
</html>

この回答への補足

ありがとうございます。
私が作りたかったのはまさにこれです。そして、説明部足だった事に関しては失礼しました。
改行の件に関しては、見易いように書き直した次第です。

また、function SetSubMenu( idname ) {
AllHide();
if( idname != "" ) {
document.getElementById(idname).style.display = 'block';
}
}です.忘れていました。

この機能により、選択項目によって次のプルダウンの内容を代えようと考えていました。
しかし、実装してみたところ増殖したプルダウンたちが同じところを代えてしまうのでこのロジックはだめでした。
入力後の処理については、これをCGIに飛ばした後、SQL文を作成して、データベースからデータを検索しようと考えています。
考え方は正しいでしょうか?現在、インターンをしているのですが上司の方はこういうのが欲しいと絵で言ってくるもののやり方は一切知らないので私が考えて作成しています。本当は違う検索の仕方で、すでにシステムを構築したんですけど。。。大変です。
そして、テーブルは仰る通りレイアウトのためだけです。しかし、どう考えてもfujillinさんの方がきれいに書かれてますね!
どうやって勉強したらそういう知識がしっかりつくのでしょうか???もし,JAVASCRIPTについてのいいサイトがあれば,教えてください。
この度は、本当にありがとうございました。
選択項目にたいして、次の項目の内容が変わるプログラムについても何か教えていただれば幸いです。

補足日時：2010/03/16 18:29
通報する
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#2です。

　まだ、よくわかってないけど…

要はWerkstoff、Shiftfaktor、SurfCorrの選択された内容によって、表示するセレクト要素を取り替えたいということでいいのでしょうか？
Werkstoffに対応するものはなんとなくわかりますが、あとの2つに対応するものが良くわかりません。（Getriebeとかあるけどドイツ語さっぱりなもんで…）
実は、そのセレクトも選択肢が1個しかないみたいなので、よくわからないけどセレクトにする必要があるのでしょうか？（固定文字なのかなぁ？）

勝手に、ShiftfaktorはGetriebeに対応するものとして、SurfCorrに対応するものは付加えてしまいました。
（親のオプションのvalue値が子のセレクト要素のname属性と一致するものと対応すると仮定しています）

＞入力後の処理については、これをCGIに飛ばした後～～
よくわかんないけど、formの要素（可変）のname属性がかなりダブることになりますが、後の処理は大丈夫なのでしょうか？
（そもそも、どのようなform構成にしているのかもわからないけど：全体で1つのform？）
例えば、一つのＦｉｌｔｅｒ内でも「condition」などはダブっているみたいだし、それが複数になれば…

あと、最初のDatenbankもセレクトになっているけれど、ご提示のものでは、選択肢は1個しかないみたいだし…（これが複数になった場合、どういう動作にしたいのか想像がつかない）

---------------------------------
以下、勝手に変えてます。
*「+」は各Ｆｉｌｔｅｒには必要ないと思われるので、頭に1個だけにしてしまいました。それに合せて「-」も行頭に表示するようにレイアウトをいじってます。
*ブラウザの幅を縮めると改行したりしますが、それが都合が悪い場合は、全体をdivで囲って幅を確保するとかしたほうがいいかも。
*No2の回答だと、id=_DefaultのＬＩがクローンされることになってしまっていたので、修正しました。（HTMLソースを雛形にするようにしています。）
*Filterを増加させると、子のセレクタ（表示されるのは1個だけ）も全部複製していますので、たくさん作ると不要なものが増加することになり、効率的ではないかも。（雛形だけ残して、あとは動的に生成するほうがよいかも、とりあえず現状はご質問のサンプルの方法）

などなど、かなりいい加減な想定をしていますので、あくまでも方法としての一つのサンプルということで…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css"><!--
.hide, #Default { display: none; }
.annotation { font-size:80%; padding:1em 0 0 10em ; }
ul#datalist, ul#datalist * { list-style:none; margin:0; padding:0; }
ul#datalist li span { display:inline-block; width:5em; }
ul#datalist li input { padding:1px 3px; margin-right:1em; background-color:#eef; border:2px ridge #dde; }
--></style>

<script type="text/javascript"><!--
window.onload = addFilter;
function clickFunc(evt) {
var e, t = evt.target || evt.srcElement, v = t.value;
if (t.nodeName != 'INPUT') return;
if (v == '+') addFilter(); else if (v == '-') delFilter(t.parentNode);
}
function addFilter() {
var def = document.getElementById('Default');
var e = def.cloneNode(true);
e.removeAttribute('id');
def.parentNode.appendChild(e);
}
function delFilter(e) {
if (e.parentNode.getElementsByTagName('LI').length > 3) e.parentNode.removeChild(e);
}
function setSubItem(elm) {
var i, opt = elm.options, e = elm;
while (e = e.nextSibling) {
for (i=0; i<opt.length; i++) {
if (e.name == opt[i].value) {e.className='hide'; break; }
}
if (e.name == elm.value) e.className = '';
}
}
--></script>
</head>
<body>
<ul id="datalist" onclick="clickFunc(event);">
<li>
<input type="button" value="+">
<span>Datenbank:</span>
<select name="datenbank">
<option value="bank1">DATEN BANK 1</option>
</select>
</li>
<li id="Default">
<input type="button" value="-">
<span>Filter:</span>
<select name="condition">
<option value="and">AND</option>
<option value="or">OR</option>
</select>
<select onchange="setSubItem(this)">
<option value="Werkstoff">1.Werkstoff</option>
<option value="Shiftfaktor">2.Shiftfaktor</option>
<option value="SurfCorr">3.SurfCorr</option>
</select>
<select name="condition">
<option value="like">like</option>
<option value="notlike">not like</option>
<option value="equal">=</option>
<option value="&lt;">&lt;</option>
<option value="&gt;">&gt;</option>
<option value="&lt;=">&lt;=</option>
<option value="&gt;=">&gt;=</option>
</select>
<select name="Werkstoff">
<option value="Werkstoff1">Werkstoff1</option>
<option value="Werkstoff2">Werkstoff2</option>
</select>
<select name="Shiftfaktor" class="hide">
<option value="Getriebe1">Getriebe1</option>
<option value="Getriebe2">Getriebe2</option>
</select>
<select name="SurfCorr" class="hide">
<option value="SurfCorr1">SurfCorr1</option>
<option value="SurfCorr2">SurfCorr2</option>
</select>
</li>
</ul>
<div class="annotation">
( +:St&uuml;ckzusatz-:Streichung )
</div>
</body>
</html>

この回答への補足

ありがとうございます。
時間がなく、返事が遅くなりました。

私がしたかったことは、まさにこれです。
セレクトが一つしかないのは、html：：templateという
モジュールを使ってループをさせています。
ので、本来はデータがたくあんあります。

ご親切にありがとうございました。
ただ、まだソースを理解してないので、理解できるようにとりくみたいとおもいます。

補足日時：2010/03/19 15:24
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報