電子書籍の厳選無料作品が豊富！

PERL Ajax JSON 付随情報

締切済

  • 質問者：spider32
  • 質問日時：
  • 回答数：1件

恐れ入ります。
perl 上でJSON出力された情報を、

別ファイルのinput フィールド上に付随情報を表示したいのですが、苦戦しています。

例）Mysql上に以下のデータがあり、
0001|花|ガーベラ
0002|酒 | ビール
0003|菓子|ピーナッツ

{"pro_code":"0001",bunrui":"花","pro_name":"ガーベラ"},
{"pro_code":"0002",bunrui":"酒","pro_name":"ビール"},
{"pro_code":"0004",bunrui":"菓子","pro_name":"ピーナッツ"}

と、JSONにより出力したデータを、
別ファイルから読み込み、
input フィールドに0001を入力すると、別フィールドに花、ガーベラと表示されるイメージです。

よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： _--_1l1_1_
  • 回答日時：

表示がくずれるので空白2文字を全角空白にしていることに注意。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　　　　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
　　<title>Choice</title>
　　<script type="text/javascript">
　　　<!--
　　　　function addListener(elem, ev, listener) {
　　　　　if (elem.addEventListener) {
　　　　　　elem.addEventListener(ev, listener, false);
　　　　　}
　　　　　else if (elem.attachEvent) {
　　　　　　elem.attachEvent('on' + ev, listener);
　　　　　}
　　　　　else {
　　　　　　throw new Error('Not support event listener');
　　　　　}
　　　　}

　　　　function fillInput() {
　　　　　var code = document.getElementById('code');
　　　　　var type = document.getElementById('type');
　　　　　var name = document.getElementById('name');

　　　　　var json = '[ \
　　　　　　　　　　　　{"code":"1", "type":"花", "name":"ガーベラ"},\
　　　　　　　　　　　　{"code":"2", "type":"酒", "name":"ビール"},\
　　　　　　　　　　　　{"code":"3", "type":"菓子", "name":"ピーナッツ"}\
　　　　　　　　　　　]';
　　　　　var goods = eval(json);
　　　　　var i;
　　　　　for (i = 0; i < goods.length; i++) {
　　　　　　　if (goods[i].code == code[code.selectedIndex].value) {
　　　　　　　　　type.value = goods[i].type;
　　　　　　　　　name.value = goods[i].name;
　　　　　　　　　break;
　　　　　　　}
　　　　　}
　　　　　if (i >= goods.length) {
　　　　　　　alert('Unknown code : ' + code[code.selectedIndex].value);
　　　　　　　type.value = '';
　　　　　　　name.value = '';
　　　　　}
　　　　}

　　　　function init() {
　　　　　fillInput();
　　　　　addListener(document.getElementById('code'), 'change', fillInput);
　　　　}

　　　　addListener(window, 'load', init);
　　　//-->
　　</script>
　</head>
　<body>
　　<form id="form1">
　　　code :
　　　<select id="code">
　　　　<option value="1"　selected>option1</option>
　　　　<option value="2">option2</option>
　　　　<option value="3">option3</option>
　　　</select><br>
　　　type : <input type="text" id="type" value=""/><br>
　　　name : <input type="text" id="name" value=""/><br>
　　</form>
　</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。大変参考になりました。

通報する
お礼日時：2014/09/27 14:00

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報