Jqueryの基本的な設計のご相談。2つのinputの値が入力された時だけ発火する

Question

現在Jqueryで下記のHTMLをもとに、
input(id="median")を入力し、加えてinput(id="step")を入力した場合に書くoptionの要素に入力の値に応じてappendするような仕組みを作っております。
イメージとしては
input(id="median")=1000
input(id="step")=200
を受け付けた場合

<option value="1200">1200</option> <option value="1400">1400</option> <option value="1600">1600</option>

①Jqueryのイベントハンドラとしてユーザーが2つの要素（"median","step"）が入力されて初めてstepの要素が決まる（発火する）ような仕組みを作ることは可能でしょうか？その場合どのようなやり方かをアドバイスお願いします。
イメージとしてinputが2つ埋まっていれば初めてoptionの選択肢が生まれるという形を1段階目として、その後ユーザがinputの値を変えたいと思うこともあるので、それはchangeイベントで常にoptionを可変二していこうと考えております。
ただ、前提として2つが埋まっていなければ、optionの選択肢が出てこないという設計です。

②これも含めて、全体のバリデーションはサーバーサイドのphpでも構築するのですが、そもそもの疑問です。ユーザーがJavaScriptをきっていた場合、このoptionの選択肢は何も出てこないはずかと思います（厳密には値が何もappendされないので、HTML上の初期値しかユーザーは選択できない）が、そのような場合、サーバーサイドでいくら頑張っても対応ができないかと思います。無理やりipnutの値だけ取得してあげて、optionの中身をページ遷移後に書き換えてあげることは可能かもしれませんが、そんなサイトを見たことはありません。。
そのようなことを考えた場合、実務上、このようなJqueryを使った設計は適切ではないのでしょうか、または違う方法で対応されているのでしょうか、はたまたJSをきっているクライアントはある程度諦めているのでしょうか。

ご助言の程、よろしくお願い申し上げます。

<input type="text" id="median" placeholder="目安金額（中央値）を入力">
<input type="text" id="step" placeholder="ステップ金額（階段値）を入力">
<select id="max" size="x">
<option value="n1">n1</option>
<option value="n2">n2</option>
<option value="n3">n3</option>
</select>

Comments

[kei344]

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[pegy]

失礼致しました、close致します。

Answer 1

中央値と階段値だけではoptionの個数を確定できませんね
またsizeもダミーがはいっていて幅がわかりません
仮にsize=3を固定でoptionは3つが固定とかんがえてよいのでしょうか?
それと初期値=中央値+階段値ってことでいいのでしょうか？

<script>
$(function(){
  $('#median,#step').on('change',function(){
    var median=parseInt($('#median').val());
    var step=parseInt($('#step').val());
    var flg=median>0 && step >0;
    $('#max').find('option').remove();
    for(var i=1;i<=3;i++){
      var num=flg?median+step*i:'';
      $('#max').append($('<option>').val(num).text(num));
    }
    $('#max').prop('disabled',!flg);
  }).trigger('change');
});
</script>
<input type="text" id="median" placeholder="目安金額（中央値）を入力"><br>
<input type="text" id="step" placeholder="ステップ金額（階段値）を入力"><br>
<select id="max" size=3 disabled multiple>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>

Comments

[pegy]

ご回答を頂き有難うございます。
セレクターを２つ並べてイベントを設定できるんですね、勉強になりました、有難うございます。
1点不明な記法があるのですが、flgの変数関連で条件式を入れて変数を条件するときに？や！を併記しているようですが、どのような意味でしょうか？
検索しても、条件演算式の用法しかでてこず、このような記法がなかったため、教えて頂けますでしょうか。
宜しくお願い致します

[yambejp]

var num=flg?median+step*i:'';
は三項演算子といって「条件式?正の値:偽の値」といったifに近いことができます
書き換えるとこうです。
if(flg==true){
num=median+step*i;
}else{
num="";
}

$('#max').prop('disabled',!flg);について「!」は論理演算子の否定です
flgがtrueなら!flgはfalse、flgがfalseなら!flgはtrueになります

[pegy]

コメント有難うございます。
大変、勉強になり、よくわかりました。
お力を頂き誠に有難うございます。