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

こんな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」で取得できます。

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

特に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;

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