- ベストアンサー
連動ボタンの作り方
- PHPとMySQLにて、ユーザー管理のシステムを作成しております。ユーザーの検索にて、イニシャルのフィールドより、PHP経由で検索する部分は完成しているのですがキーボードからの入力を極力無くしたいために、「あ」「か」「さ」等のボタンを配してSQLを組み立てています。
- 現状、「あ」をクリックした場合、「あ」「い」「う」「え」「お」が表示されるようになっているのですができれば1文字づつ検索できればと、知恵を絞ってます。現実的な話で、「あ」をクリックした場合、別のボタンに「あ」「い」「う」「え」「お」「か」をクリックした場合、「か」「き」「く」「け」「こ」と、動的に変化するボタンを生成できれば理想に近い動作が期待できそうです。
- おそらく、JavaScriptを使えば、実装できそうなのですが、とっかかりが無くこまっております。参考になるような項目等、提示して頂ければ幸いです。
- buraba111
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ie は、ぱす！ ぜんかくくうはくは、はんかくにしてみてね。 <!DOCTYPE html> <title></title> <style type="text/css"> #a input[type="button"] { width : 25px; } #b input[type="button"] { width : 60px; height : 60px; } </style> <form id="hoge" action="#"> <div id="a"> <input type="button" value="あ"> <input type="button" value="か"> <input type="button" value="さ"> <input type="button" value="た"> <input type="button" value="な"> <input type="button" value="は"> <input type="button" value="ま"> <input type="button" value="や"> <input type="button" value="ら"> <input type="button" value="わ"> <input type="button" value="ん"> </div> <div id="b"> <input type="button" value="・"> <input type="button" value="・"> <input type="button" value="・"> <input type="button" value="・"> <input type="button" value="・"> </div> <input type="hidden" name="Initials" value=""> </form> <script> var hoge = { a : document.querySelectorAll ('#a input'), b : document.querySelectorAll ('#b input'), c : { 'あ': ['あ', 'い', 'う', 'え', 'お'], 'か': ['か', 'き', 'く', 'け', 'こ'], 'さ': ['さ', 'し', 'す', 'せ', 'そ'], 'た': ['た', 'ち', 'つ', 'て', 'と'], 'な': ['な', 'に', 'ぬ', 'ね', 'の'], 'は': ['は', 'ひ', 'ふ', 'へ', 'ほ'], 'ま': ['ま', 'み', 'む', 'め', 'も'], 'や': ['や', '・', 'ゆ', '・', 'よ'], 'ら': ['ら', 'り', 'る', 'れ', 'ろ'], 'わ': ['わ', 'ゐ', '・', 'ゑ', 'を'], 'ん': ['ん', '・', '・', '・', '・'] }, d : function (a, b) { this[b].value = a; this[b].disabled = (a == '・')}, e : document.querySelector ('input[name="Initials"]'), handleEvent : function (evt) { var e = evt.target; if ('INPUT' === e.nodeName) if ('button' === e.type) switch (e.parentNode.id) { case 'a' : this.c[e.value].forEach (this.d, this.b); break; case 'b' : if ('・' !== e.value) { this.e.value = e.value; e.form.submit (); } break; } } }; document.addEventListener ('click', hoge, false); </script>
お礼
babu_babooさん ご丁寧にソースまで書いて頂きありがとうございました。 早速TEST環境用にソースを書き直し、無事思い通りの動作を致しました。 ありがとうございました。 じっくり読んで、内容の理解をしたいと思います。 Javaは取っつきにくいですねぇ。。。