Popup onselect事件

Question

我目前正在使用Laravel框架，我正在開發一個網頁，允許用戶輸入開始和結束日期，以便搜索任務列表（通過該過濾器）。 到目前為止，用戶可以從下拉列表中決定日期是BEFORE，是ON還是在從html5日歷（輸入類型=日期）中選擇的特定日期之后。 我現在要做的是為他們添加一個額外的選項，以選擇開始日期/結束日期為兩個日期之間。 所以我最好希望他們選擇“介於兩者之間”選項，該選項應該在選中時觸發一個日歷（或兩個實際日歷），這將允許他們選擇這兩個日期並允許我存儲這兩個值。

我是Javascript / HTML的新手，所以任何幫助都將非常感謝！

以下是我目前在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>

注意：我確實有一個單獨的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(); 
         }); 
      });

希望這對你有所幫助。