株式会社アットマーク

MENU

【メモ】Jqueryでselectのselectedを取得

2023.10.15

【メモ】Jqueryでselectのselectedを取得のイメージイラスト

例えば、ウェブサイトでプルダウンを変更した際に、値によって文字の色を変えたい時などに用います。

こんなselectを用意します。

<select id="selectColor">
<option data-color="#000" value="1">黒</option>
<option data-color="#F00" value="2">赤</option>
<option data-color="#00F" value="3">青</option>
</select>


次にJQueryで

$(document).on( 'change', '#selectColor', function(){
    $(this).css( 'color', $(this).find('option:selected').data('color') );
} );


選択しているoptionは、「option:selected」で取得できます。

【メモ】tableのカラム幅がwidth指定しても固定されない場合

2023.08.30

【メモ】tableのカラム幅がwidth指定しても固定されない場合のイメージイラスト

あるあるですが、記載の仕方を忘れることがあるので、メモ。

特にPHPなどで動的にtableを作成する場合によくありますよね。thやtdの幅をwidthで指定しているのに、上手く幅指定が出来ていないこと。そういった場合の対処法です。

table-layout: fixed;

 

カレンダーを動的に作る時などに、幅を固定する際、

th.week, td.week {
    width: calc( 100% / 7 );
}

よくある方法ですが、tdの中に動的に文字(文字数がどれくらいになるかわからない時)を入れたりすると、結構レイアウトが崩れます。その時は、最後の手段「table-layout: fixed;」で解決できることがあります。

どうしても固定されないなら、動的に文字の入るブロック要素に

    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;

で、はみ出る文字を消す、かな。

Categories

お知らせ(1)

田舎で起業(5)

独り言(2)

田舎暮らし(1)

システム開発(9)

お仕事メモ(7)

CSS(1)

MySQL(2)

PHP(1)

JavaScript(3)

Archives