在select选项中选中对象就直接提交表单

最新推荐文章于 2023-10-13 17:14:16 发布

原创最新推荐文章于 2023-10-13 17:14:16 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#提交表单 #异步提交表单

thinkphp 同时被 2 个专栏收录

19 篇文章

订阅专栏

html / js / jq

5 篇文章

订阅专栏

本文介绍如何使用HTML表单结合JavaScript实现日期选择后自动提交表单进行数据查询的功能。通过两个实例展示了如何在用户选择日期后触发事件并提交表单到服务器，服务器端如何解析请求参数并执行数据库查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在html中定义一个form

2、在form中定义一个select下拉框

3、给下拉框绑定一个onchange事件

4、定义一个js函数处理onchange事件

5、在js函数中获取表单对象，利用form.submit()方法提交表单

第一种方法：

提交表单：

<form action="<{:U("Index/search")}>" method="post"  id="myform">
    <select onchange="submitForm();">
        <option value="">beijing</option>
        <option value="">shanghai</option>
    </select>
</form>
<script type="text/javascript">
function submitForm(){
//获取form表单对象
    var form = document.getElementById("myform");
    form.submit();//form表单提交
}
</script>

Index/search

public function search(){

        $years=I("post.dateYear");
        $month=str_pad(I("post.dateMonth"),2,"0",STR_PAD_LEFT); //当月份不足两位数时自动在左侧添加零
        $day=str_pad(I("post.dateDay"),2,"0",STR_PAD_LEFT);//当天数不足两位数时自动在左侧添加零
        $sel_date=strtotime($years.$month.$day);
        $end_date = $sel_date + 3600*24-1;//当天晚上23:59:59
        $cid = M("Conclass")->where(array('conclassname'=>'值班信息'))->getField("id");
        $where['cid']=$cid;
        $where['showdate']  = array('between',''.$sel_date.','.$end_date.'');
        $data = M("Content")->where($where)->find();
        $this->assign("data",$data );
        $this->display();

}

第二种方法：

Index/index

public function index(){

    //值班信息
    $cid = M("Conclass")->where(array('conclassname'=>'值班信息'))->getField("id");
    $timetoday = strtotime(date("Y-m-d",time()));//今天0点的时间点
    $endtime = $timetoday + 3600*24-1;//当天晚上23:59:59
    // $yesterday = strtotime(date("Y-m-d",strtotime("-1 day")));//昨天0点  date("Y-m-d H:i:s", $yesterday);
    /*当天值班信息*/
    $where['cid']=$cid;
    $where['showdate']  = array('between',''.$timetoday.','.$endtime.'');
    $on_duty = M("Content")->where($where)->find();
    // echo M('Content')->_sql();
    //下面是把编辑器中的内容打撒并重组数组
    $str=$on_duty[concon];
    preg_match_all('|<p>(.*?)<\/p>|s',$str,$match);
    $todayduty=$match[0];
    $this->assign("on_duty",$on_duty);
    $this->assign("todayduty",$todayduty);

}

<!-- 当天值班信息 -->
<div class="Duty maxWidth swiper-container" id="Duty">
    <ul class="swiper-wrapper clearFix">
        <volist name="todayduty" id="vv">
        <li class="swiper-slide"><{$vv}></li>
        </volist>
    </ul>
</div>
-------------------------------------------------------------------------
<!-- 根据日期查询值班信息 -->
<div class="contDownDateTop">
     <h3>值班信息</h3>
      <form class="Date" name="form" id="myform">
            <select id="dateYear" title="年" name="dateYear">
            <!--<option value="year">年</option>-->
            </select>
            <select id="dateMonth" title="月" name="dateMonth">
             <!--<option value="month">月</option>-->
             </select>
             <select id="dateDay" title="日" name="dateDay">
             <!--<option value="day">日</option>-->
            </select>
     </form>
</div>
<div class="contDownDateDown">
      <{$on_duty.concon}>   <!--当天值班信息-->
 </div>
<script type="text/javascript" src="__CN__/js/jquery-form.js"></script>
<script type="text/javascript">
$('#dateDay').on('change', function() {
    var Year = $('#dateYear').val();
    var Month = $('#dateMonth').val();
    var Day = $('#dateDay').val();
    $.post("<{:U('Index/search')}>", {"dateYear":Year,"dateMonth":Month,"dateDay":Day},function(data){
        $(".contDownDateDown").empty();
        $(".contDownDateDown").append(data.concon);
     } );

});
</script>

Index/search

public function search(){

        $years=I("post.dateYear");
        $month=str_pad(I("post.dateMonth"),2,"0",STR_PAD_LEFT); //当月份不足两位数时自动在左侧添加零
        $day=str_pad(I("post.dateDay"),2,"0",STR_PAD_LEFT);//当天数不足两位数时自动在左侧添加零
        $sel_date=strtotime($years.$month.$day);
        $end_date = $sel_date + 3600*24-1;//当天晚上23:59:59
        $cid = M("Conclass")->where(array('conclassname'=>'值班信息'))->getField("id");
        $where['cid']=$cid;
        $where['showdate']  = array('between',''.$sel_date.','.$end_date.'');
        $data = M("Content")->where($where)->find();

        $this -> ajaxReturn($data);


}

js-时间：

$(document).ready(function() {
    try {
        var selectYear = document.getElementById("dateYear");
        var selectMonth = document.getElementById("dateMonth");
        var selectDay = document.getElementById("dateDay");
        var date = new Date();
        dateYear = date.getFullYear();
        dateMonth = date.getMonth() + 1;
        dateDay = date.getDate();
        //日期生成函数 year：年数
        function createDate(year) {
            // 生成前10年
            for (var i = dateYear; i >= dateYear - year; i--) {
                var option = new Option;
                option.setAttribute("value", i);
                if (dateYear == i) {
                    option.setAttribute("selected", "selected");
                }
                option.innerHTML = i + "年";
                selectYear.appendChild(option);
            }
            // 生成月份
            for (var n = 1; n <= 12; n++) {
                var optionMonth = new Option;
                optionMonth.setAttribute("value", n);
                if (dateMonth == n) {
                    optionMonth.setAttribute("selected", "selected");
                }
                optionMonth.innerHTML = n + "月";
                selectMonth.appendChild(optionMonth);
            }
            // 生成日期
            for (var m = 1; m <= 31; m++) {
                var optionDay = new Option;
                optionDay.setAttribute("value", m);
                if (dateDay == m) {
                    optionDay.setAttribute("selected", "selected");
                }
                optionDay.innerHTML = m + "日";
                selectDay.appendChild(optionDay);
            }
        }

        createDate(10);
        // 保存天数
        var days;
        //年份点击 绑定函数
        selectYear.onclick = function () {
            //默认1月
            selectMonth.options[0].selected = true;
            //默认1号
            selectDay.options[0].selected = true;
        };
        //月份点击 绑定函数
        selectMonth.onclick = function () {
            //天数显示默认 1号
            selectDay.options[0].selected = true;
            //计算天数显示范围
            //如果是二月
            if (parseInt(selectMonth.value) === 2) {
                //判断是否是闰年
                if ((parseInt(selectYear.value) % 4 === 0 && parseInt(selectYear.value) % 100 !== 0) || (parseInt(selectYear).value % 400 === 0)) {
                    days = 29;
                } else {
                    days = 28;
                }
            } else if (parseInt(selectMonth.value) === 4 || parseInt(selectMonth.value) === 6 || parseInt(selectMonth.value) === 9 ||
                parseInt(selectMonth.value) === 11) {//判断小月
                days = 30;
            } else {
                days = 31;
            }
            //增加或删除天数  是28天删除29，30，31
            if (days == 28) {
                //必须倒叙，不然新增一个[28]
                selectDay.options.remove(30);
                selectDay.options.remove(29);
                selectDay.options.remove(28);
            }
            //如果29天
            if (days == 29) {
                selectDay.options.remove(30);
                selectDay.options.remove(29);
                //如果29天不存在 添加
                if (!selectDay.options[28]) {
                    selectDay.add(new Option("29日", 29), null);
                }
            }
            //如果30天
            if (days == 30) {
                selectDay.options.remove(30);
                if (!selectDay.options[28]) {
                    selectDay.add(new Option("29日", 29), null);
                }
                if (!selectDay.options[29]) {
                    selectDay.add(new Option("30日", 30), null);
                }
            }
            //如果是31天
            if (days == 31) {
                if (!selectDay.options[28]) {
                    selectDay.add(new Option("29日", 29), null);
                }
                if (!selectDay.options[29]) {
                    selectDay.add(new Option("30日", 30), null);
                }
                if (!selectDay.options[30]) {
                    selectDay.add(new Option("31日", 31), null);
                }
            }
        };


    }catch(error){
        console.log("不是首页！");
    }

});