Javascriptでプルダウンの選択を変更する(getElementsByTagName)

2016年4月30日 jquery版はこちら

 

Javascriptでプルダウンの選択を変更するのは、テキストフォームにデータを突っ込むんだり、ラジオボタンの選択を変更するのとは違い少々面倒です。

<script>
function change_pulldown(){
pulldown_option = document.getElementById("hoge").getElementsByTagName('option');
for(i=0; i<pulldown_option.length;i++){
if(pulldown_option[i].value == "クラブマンハイレッグ"){
pulldown_option[i].selected = true;
break;
}
}
}
</script>

<p><a href="javascript:void(0)" onclick="change_pulldown()">「クラブマンハイレッグ」を選択</a></p>

<select id="hoge">
<option value="イングラム">イングラム</option>
<option value="グリフォン">グリフォン</option>
<option value="タイラント2000">タイラント2000</option>
<option value="クラブマンハイレッグ">クラブマンハイレッグ</option>
</select>

簡単に説明しますと以下のようになります。

1.selectにidをつける(ここでは"hoge"にしました)
2.そのタグの中にあるoptionタグのデータを、getElementsByTagName('option');で配列取得する
3.取得したoptionデータをforループでまわし、optionのvalueデータと選択させたい内容とをifで照らし合わせ、一致したらselected=trueにする。

サンプル [新しいウィンドウで開く] ※サンプルは上記のソースに少し手を加えています。

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | JavaScript関連

Javascriptでタグに囲まれた内容を取得する(innerHTML)

例えば

<div id="hoge">ほげ</div>

とあり、id="hoge"のdivタグで囲まれている部分の内容を取得する場合は、innerHTMLを使用します。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.write("実行結果:"+data);
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>

このようにスクリプトを記述し、「関数実行」を押せば「実行結果:ほげ」が表示されます。(このソースだと地味なんでわかりにくいですが^^;)

なおinnerHTMLはデータを取得するだけでなく、指定したidを持つタグに出力することもできます。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.getElementById("output").innerHTML = data;
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>
<div id="output"></div>

というようなソースにすれば、id="hoge"のデータを取得後、id="output"に取得したデータを表示させることができます。
ちなみにこのinnerHTMLによる出力、id="output"のタグにあらかじめ内容が記述されていたとしても、javascriptの実行結果が優先され、中身がすり替わって表示されます。(サンプル参照)

サンプル [新しいウィンドウで開く]

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | JavaScript関連

cakePHPでデータベースのテーブルにフィールドを追加したときに発生した問題2

前回、cakePHPでデータベースのテーブルにフィールド追加したとき、それが反映されていない問題がありました。
とりあえずは、"fields"=>"*"の追加で一応の解決を見たのですが、あとから不具合がぼろぼろ出てくるわ、こちらでは手の負えない関数で問題が発生するわで、なんとかならんかなぁと思いググってみたらありました!

http://oneday.ter.jp/php/cakephp-php/983.html (イテルの一日一問さん)

「app/tmp/cache/models」フォルダの中にたまっているキャッシュを削除すれば良いらしい。

キャッシュか~。
そんなことだろうとは思ったけど、どこにあるのかはさっぱりわからなかったので助かりました。
ここの記事でも書かれてますが、キャッシュ恐るべし・・・

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | PHP関連

cakePHPでデータベースのテーブルにフィールドを追加したときに発生した問題

システムの修正でテーブルのフィールドを追加した際、データベースにはデータが入っているのに、findでそのデータを取り出せない問題が発生しました。
ローカル(XAMPP)では正常だったのに、本番サーバ(ファーストサーバを使用)ではうまく動作してくれない・・・
わざとエラーを吐き出させて表示されたSQLを読んでみると、どうやら追加されたフィールドをfieldsで取り出してくれていない様子。とくに設定してないんだけどなぁ。
しかたなく「fields=>"*"」を追加して解決しました。

■こんな感じ
$this->Hoge->find("all", array("fields"=>"*", "conditions"=>$conditions, ));

modelとかと関係あるのかな?

決定的解決方法見つかりました。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | PHP関連

fgetcsvのバグ

いまさらですが、PHP4ではまともに使用できていた「fgetcsv」関数。
PHP5になった途端不具合の嵐です。(サーバによるかもしれませんが。)

$csv = "/www/csv/test.csv";
$fl = fopen($csv, "r");
while($data = fgetcsv($fl, 10000)){
   echo $data[0].":".$data[1];
}

としていると、カンマでの区切りがうまくいっていないのか、表示されなかったり、特定の文字で文字化けを起こしたりします。
こうなると、mb_convert_encodingで文字コードを調整しようとしてもうまくいきません。

ここはおとなしくfgetcsvをあきらめてfgetsとexplodeを使用しましょう。

$csv = "/www/csv/test.csv";
$fl = fopen($csv, "r");
while($data_fl = fgets($fl)){
   $data_fl = rtrim($data_fl);
   $data = explode(",", $data_fl);
   echo $data[0].":".$data[1];
}

※rtrimは行の最後にある改行コードを取り除いてくれます。必要に応じて記述してください。自分はよく取り出したデータを条件分岐にかけることがあるので、改行コードの\r\nがあると不具合を起こすことがあります。

記述が少し長くなりますが、これで解決します。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | PHP関連

ベーシック認証解除

ベーシック認証をかけると、そのフォルダ以下すべてその影響を与えます。
特定のフォルダで解除するためには、そのフォルダにすべてのアクセスを許可する命令を書いたhtaccessを入れる必要があります。

なんとなく
Order allow,deny
Allow from all
と書けばいけそうな気がしますが、これでは許可してもらえません。
正確には以下のように記述します。

Satisfy Any

これだけ。
これでそのフォルダ以下はアクセス可能となります。

■追記

この記事の作成・編集中、
Require valid-user
Order allow,deny
Allow from all
Satisfy Any

とかいろいろと書きましたが、上記に書いているように
Satisfy Any

だけで大丈夫です。

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | サーバー関連

HTML5で3Dやろうぜ!

最近話題のHTML5。
自分は3Dに興味があるのでO3Dには度肝を抜かれました。
http://code.google.com/intl/ja/apis/o3d/(Google Code)
O3Dをダウンロードしないとみれませんが、無料なので試してみると面白いですよ。
特に気に入ったサンプル(ゲーム)
http://o3d.googlecode.com/svn/trunk/samples/io/io.html

まだモデルを読み込むのすら苦戦している状態ですが、暇を見つけてなにか作ってみたいですね。

でもFlashではできて、HTML5ではできないことはまだまだ多いみたい。
比較を扱ったHP
http://clockmaker.jp/blog/2010/02/flash-vs-html5/(ClockMaker Blogさん)

RewriteCond %{REQUEST_FILENAME}の衝撃

当記事は大きい間違いがあったため、いったん削除しました。

nandani | 2010年07月18日 | コメント(2) | トラックバック(0) | サーバー関連

WordPressで日付を表示する際の注意事項

WordPressで日付を表示する際、よく「the_date()」を使用しますが、この関数には問題点があります。

それはアーカイブなどで記事を表示する際、同じ日の投稿が複数あると1つめの記事だけその日付を表示して以後は表示されなくなるということです。

そういう時は、the_date()ではなく、get_the_date()を使用しましょう。

echo get_the_time('Y')."年".get_the_time('m')."月".get_the_time('d')."日";

get_the_timeを使用する場合は、echoやprintをつけるのを忘れずに。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | CMS関連 | PHP関連

ブログ構築中です

現在Wordpressにてブログを構築中です。

完成までもうしばらくお待ちください。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | News & Topics

Copyright(c) 2010 - 2018 ダリの雑記