readonlyのselectをリードオンリーにする方法

selectをreadonlyにしたいと思っている
だからこそリードオンリーにしなくてはならない。

selectのreadonlyってなぜかできないんですよね。。
なので、jsで無理やりやるわけなんですが、こんな感じでどうですか？

readonlyのselectをリードオンリーにする方法

<select id="pet-select" readonly>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

$('#pet-select').on('click', function(e) {
    if ($(this).attr('readonly') == 'readonly') {
　　　　 // 変更前のデータを保存
        $(this).data('oldData', $(this).val());
    }
});
$('#pet-select').on('change', function(e) {
    if ($(this).attr('readonly') == 'readonly') {
　　　　 // データを戻す
        $(this).val($(this).data('oldData'));
        return;
    }
});