Posts tagged option

CakePHP select タグの選択していないときの状態を指定する

0
6260日
by in CakePHP

Cute CakePHP Trick of the Day – GenerateList Empty Slot In List | Web Development 2.0: Web Design, CakePHP, Javascript
で select タグの選択していないときの状態の値を指定する方法が書かれていますが、この方法は間違っています。

元のエントリのコメントでも指摘されていますが、ヘルパーのメソッドの使い方が違います。コードを実際に書いて検証してみれば、動かないのがすぐに分かります。

元の紹介されている方法はそもそも PHP の文法的におかしいのでそこは適当に修正して紹介します。（変数名に $ がなかったり、generateList() を出力をどこにも保存していないかったりします。）

コントローラで下記のように generateList でリストを取得して
$state_id = $this->State->generateList();
ビューで
echo $form->input($state_id, array('empty' => '--'));
と紹介されています。

CakePHP1.1 の Formヘルパーには input メソッドがないので CakePHP 1.2 でのやり方だと思いますが、実際に Form ヘルパーの input メソッドは
function input($fieldName, $options = array())
と定義されています。上記のように書くと

で、実際にはどう書けばいいかというと
echo $form->input('Model/Field', array('empty'=>'---', 'type'=>'select', 'options'=>$state_list));
または、
echo $form->select('Model/Field', $state_list, null, null, array('empty'=>'---'));
と書けば select タグの先頭に
<option value=''>---</option>
と入ります。

CakePHP1.1 では 「CakePHP HTMLヘルパーで select タグを表示する」のエントリで書いたように結構面倒だったので新しい Form ヘルパーは使いやすいですね。

optionタグを選択不可にする disabled 属性を IE6 でも有効にする方法

0
6345日
by in HTML

optionタグを選択不可にする disabled 属性で紹介したように option タグに disabled 属性を指定することにより選択不可にすることができるのですが、IE6 では選択できてしまいます。

JavaScript で解決する方法です。

Select, Option, Disabled And The JavaScript Solution

上記の参考サイトに詳しくやり方が書かれていますので、簡単に手順だけ紹介。

  • 参考サイトの「Implementing」にある download リンクより JavaScript コード(select-option-disabled-emulation.js)をダウンロード
  • select-option-disabled-emulation.js を適当な場所に保存
  • html 内で select-option-disabled-emulation.js を読み込む
  • 選択不可にしたい option タグに disabled 属性を指定する

DHTML で解決する方法です。

これは上記参考サイトの補足で紹介されていたサイトです。
apptaro’s blog: Emulating Disabled Options in IE with DHTML Behaviors

こちらも上記URL に詳しいやり方が書かかれていますので、簡単にご紹介。

  • 参考サイトの中央よりやや下にある Download よりファイル一式をダウンロード
  • 適当な場所に css, htc ファイルを保存
  • html で上記 css を読み込む
  • 選択不可にしたい option タグに disabled 属性を指定する

これで IE6 でも option タグの disabled 属性が使えるようになりました。

optionタグを選択不可にする disabled 属性

2
6345日
by in HTML

フォーム画面を動的に表示してある条件のときにはラジオボタンなどを disabled にしたりします。
今回もあるフォームを作成していて在庫が0のときに select タグで表示する項目を選択できないようにしたかったので調べてみたところ、option タグにも disabled 属性がありました。

そこで下記のようにしてみたところ

<form action="">
<select>
<option>オプション1</option>
<option disabled="disabled">オプション2</option>
<option>オプション3</option>
<option>オプション4</option>
</select>
<input type="submit">
</form>

option-desiabled

うまく選択不可になりました。
ところが Firefox では OK だったのですが、IE6では選択可能に。。。

調べてみると
Disable Option’s In A Select (Dropdown) Element ? Post Archive ? www.lattimore.id.au

It never ceases to amaze me how a browser like IE6, managed to not implement something as trivial as an attribute like disabled. The IE team managed to implement it against the <select> element, but some how overlooked the <option> element. They implement the readonly attribute against the appropriate elements – yet some how the disabled attribute managed to be overlooked when they implemented it. More surprising is that, since the HTML4.01 specification came out in late 1999, IE has been updated and upgraded for various things literally hundreds of times. Why hasn’t this made it into an update? You’d begin to think that Microsoft aren’t aware of it, however the thought of that just seems too far fetched.

どうも IE6 のバグのようです。

CakePHP htmlヘルパーでラジオボタンを離れた場所に分けて書く方法

1
6365日
by in CakePHP

html ヘルパーでラジオボタンを書く場合
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3')); ?>
のように書くと、ラジオボタンを横に並べて表示させることができます。

ただ、デザインによってはテーブルなどを使用していたり縦に並べたりして、ひとつづつ表示させたいときもあると思います。

その場合は

<?php echo $html->radio('Model/field', array('1'=>'option1')); ?>
<?php echo $html->radio('Model/field', array('2'=>'option2')); ?>
<?php echo $html->radio('Model/field', array('3'=>'option3')); ?>

とすれば、それぞれのボタンを希望の位置に表示させることができます。

CakePHP html ヘルパーでラジオボタンの選択状態 (checked) を指定する方法

1
6365日
by in CakePHP

html ヘルパーを使用してラジオボタンの選択状態 (checked) を指定する方法です。

下記のようにすると option2 にチェックがつきます。
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3'), null, array('value'=>'2'), false); ?>

第4パラメータの array(‘value’=>’2′) でチェックするボタンを指定しています。
キーの ‘value’ は固定で、値の’2′ の方をチェックしたいラジオボタンの value 属性の値と同じものを指定すれば、そのボタンがチェックされます。

デフォルトや以前入力された状態を表示するために使用できそうです。

CakePHP html ヘルパーでラジオボタンを表示する

0
6366日
by in CakePHP

htmlヘルパーで radio ボタンを表示させるには下記のようにします。
下記の例では3つのラジオボタンを表示しています。
<?php echo $html->radio('Model/field', array('1'=>'option1','2'=>'option2', '3'=>'option3'), ' | ', array('onchange'=>'alert(this.value)'), false); ?>

表示される HTML は下記のようになります。
（実際には1行で出力されますが改行を入れています）

<input type="radio" name="data[Model][field]" id="field_1" onchange="alert(this.value)" value="1"  />option1 |
<input type="radio" name="data[Model][field]" id="field_2" onchange="alert(this.value)" value="2"  />option2 |
<input type="radio" name="data[Model][field]" id="field_3" onchange="alert(this.value)" value="3"  />option3 |

radio メソッド
string radio(string $fieldName, arrray $options [,string $inbetween=null [,array $htmlAttributes=array() [,bool $return=false ]]])

$fieldName
name属性の値
$option
array(‘value’=>’表示名’);
value は value=”value” になり、表示名はラジオボタンの後ろに表示される文字名
$inbetween
ラジオボタンの間に表示される文字列
$htmlAttributes
html の属性 array(‘属性名’=>’値’)で指定する
$return
ヘルパーの自動出力を抑止する（参考：ヘルパーの出力を echo を使わずに出力する方法）

WordPress に「はてなスター」を導入してみました

0
6371日
by in WordPress

はてなスターを導入してみました。

このブログは WordPress でやっています。
はてなスターはじめてガイド – Hatena Starに対応ブログサービスに入っていたので早速 JavaScritp コードを header.php の の前に入れてみました。
ところが、サイドメニューの「Category」などの横に表示されてしまいました。
どうも h3タグの中のaタグに☆ボタンを入れているようです。

再度、はてなスターはじめてガイド を見ると

技術的な詳細については、HatenaStar.js下部のドキュメント（英語）をご覧ください。

とあります。早速ソースを見てみると最後の方に色々とドキュメントが書かれています。

// This is the optional script for WordPress blogs
<script src=”http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js” type=”text/javascript”></script>

とありました。

で、

<script src="http://s.hatena.ne.jp/js/HatenaStar.js" type="text/javascript"></script>
<script src="http://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.js" type="text/javascript"></script>

と書くことにより、うまく行きました^^

さらにコメントをつけられるように、自分のブログを登録します。登録すると新たにコメントを付けられる JavaScript が発行されるので、それを追加すると。。。また、h3タグの後ろに☆ボタンが。。。

よくみるとブログ登録後に発行された JavaScritp の1行目は HatenaStar.js を読み込むもので、一番最初に貼り付けたコードと同じでした orz
で、結局ブログ登録後に発行された JavaScript と WordPress.js を読み込む JavaScript を貼り付けることにより、うまく行きました。

ブログ登録後に表示されるコードはトークンが追加されたということですね。

CakePHP HTMLヘルパーで select タグを表示する

2
6387日
by in CakePHP

HTML ヘルパーで select タグを表示したかったが、
マニュアルを見ても書かれていなかったので、調べたメモ

/cake/libs/view/helpers/html.php

を見ると selectTag というメソッドがり、

/**
* Returns a formatted SELECT element.
*
* @param string $fieldName Name attribute of the SELECT
* @param array $optionElements Array of the OPTION elements (as 'value'=>'Text' pairs) to be used in the SELECT element
* @param mixed $selected Selected option
* @param array $selectAttr Array of HTML options for the opening SELECT element
* @param array $optionAttr Array of HTML options for the enclosed OPTION elements
* @param boolean $show_empty If true, the empty select option is shown
* @param  boolean $return         Whether this method should return a value
* @return string Formatted SELECT element
* @access public
*/
function selectTag($fieldName, $optionElements, $selected = null, $selectAttr = array(), $optionAttr = null, $showEmpty = true, $return = false) {

と定義されている。

よく指定しそうな引数は

  • $fileName にフィールド名
  • $optionElements に option タグに表示するもの配列
  • $selected にデフォルトで選択状態にする $optionElements のキー
  • $showEmpty は一番最初の option タグを空 <option value=”"> </option> で表示するか

コントローラで

$this->set('questions', array(
    '卒業した学校名',
    '好きなチーム名',
    'ペットの名前',
    '両親の旧姓',
    '免許証の下4桁',
    '好きな映画の題名',
    )
);

として

<?php echo $html->selectTag('Post/question', $questions, null, null, null); ?>

とすればOK.

よく「選択してください」などの文言が option タグの先頭にある場合があるが、
そのように表示したい場合は

array(
'選択してください',
'卒業した学校名',
'好きなチーム名',
'ペットの名前',
'両親の旧姓',
'免許証の下4桁',
'好きな映画の題名',
)

として、$html->selectTag の6番目の引数に false を指定すれば空の option タグが表示されなくなる。
必須選択にしたい場合は「選択してください」の値が0なので、0以外の数字でバリデーションチェックすればいい。

« Previous
Go to Top