ポップアップonselectイベント

Question

私は現在、Laravel Frameworkと連携しており、ユーザーがそのフィルタでタスクのリストを検索するために開始日と終了日を入力できるようにするWebページに取り組んでいます。これまでのところ、ユーザは、日付がBEFOREであるか、ONであるか、html5カレンダー（入力タイプ=日付）から選択された特定の日付の後にドロップダウンリストから決定することができます。私がしようとしているのは、2つの日付の間に開始日/終了日を選択するオプションを追加することです。だから、私はそれらの2つの日付を選択して、それらの2つの値を格納することができます選択されたときカレンダー（または実際に2つ）をトリガーする必要があります '間に'オプションを選択することをお勧めします。

私はJavascript/HTMLを初めて使用しているので、どんな助けでも大歓迎です！

<h6 style="float:left">Filter By Date:</h6> 

      <div style="float:left;clear:left;"> 
       <label for="start">Start Date </label> 

       <select name="start_op" v-model="filter.start_option" @change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed--> 
        <option value="lt">Is Before</option> 
        <option value="eq" selected>Is On</option> 
        <option value="gt">Is After</option> 
        <option value="bt">Is Between</option> 
       </select> 
       <br/> 
       <input type="date" id="start" v-model="filter.start" @change="getVueTasks(pagination.current_page)"> 
      </div> 
      <div style="float:left"> 
       <label for="end">End Date </label> 

       <select name="end_op" v-model="filter.end_option" @change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed--> 
        <option value="lt">Is Before</option> 
        <option value="eq" selected>Is On</option> 
        <option value="gt">Is After</option> 
        <option value="bt">Is Between</option> 
       </select> 
       <br/> 
       <input type="date" id="end" v-model="filter.end" @change="getVueTasks(pagination.current_page)"> 
      </div> 

注：ここでは

は、私は私のHTMLファイルで、これまで持っているものである私は、主にバックエンドのものを扱う別のVUEの/ JSファイルを持っています。

Answer 1

あなたはこのような何かを行うことができます -

 <select name="start_op" id="start_op"> 
     <option value="lt">Is Before</option> 
     <option value="eq" selected>Is On</option> 
     <option value="gt">Is After</option> 
     <option value="bt">Is Between</option> 
     </select> 
     <br/> 
     <input type="date" id="start"> 

jqueryのでは -

 $(function() { 
     $("#start_op").on("change",function() { 
      var st_date= this.value; 
      if (st_date=="") return; // please select - possibly you want something else here 
      $('#start').click(); 
     }); 
     }); 

希望あなたのために役立つ、この意志を。