knowledge::short

今回も案件でハマってしまい、今後もハマりそうなのでメモ。

例えば不動産とかのお問合せフォームで、次のような希望する家賃の範囲選択を行う2つのドロップダウンからなるコントロールがあるとする。

<p>
下限：<select name="budget_lower">
<option value="下限なし" data-num="0">下限なし</option><option value="1万円" data-num="10000">1万円</option>
<option value="2万円" data-num="20000">2万円</option>
<option value="3万円" data-num="20000">3万円</option>
</select>
</p>

<p>
上限：<select name="budget_upper">
<option value="下限なし" data-num="10000000">下限なし</option>
<option value="1万円" data-num="10000">1万円</option>
<option value="2万円" data-num="20000">2万円</option>
<option value="3万円" data-num="20000">3万円</option>
</select>
</p>

ドロップダウンの値が変更がされた際に、次のJSを実行して、（下限の金額）＞（上限の金額）の際にアラートを出して値設定をリセットさせようと試みる。

$(function(){
    $( 'select[name^="budget"]' ).on('change',function(){
        let num__lw = $( '[name="budget_lower"] option:selected' ).attr('data-num');
        let num__up = $( '[name="budget_upper"] option:selected' ).attr('data-num');
        if ( num__lw > num__up ){
            $.when(
                $(this).children().eq(0).prop('selected','selected')
            )
            .done(function(){
                alert( '上限が下限より大きくなるように入力してください' );
            });
        }
    });
});

しかし、これだと条件判断がうまくいかない。原因はnum_lw,num_upの変数型が数値型でないから。

そこで、冒頭のnum_lw,num_upの定義を次のように変えて、数値型の値が入るようにする。

        let num__lw = Number( $( '[name="budget_lower"] option:selected' ).attr('data-num') );
        let num__up = Number( $( '[name="budget_upper"] option:selected' ).attr('data-num') );

これでうまくいった。

関連するタグ

関連するタグは現在ありません。