Popup onselect事件

时间:2017-06-15 14:44:13

标签: javascript html5 laravel vue.js

我目前正在使用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文件,主要处理后端内容。

1 个答案:

答案 0 :(得分:0)

你可以这样做 -

      <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(); 
         }); 
      });

希望这对你有所帮助。