html表单传送数据select,前端向后台传表单数据(有下拉菜单的表单)

1.表单排版一般效果

                    

                

姓名：

                

手机：

            

            

                

意向国家：                                            美国                        加拿大                        匈牙利                        西班牙                        葡萄牙                                    

            

             

                                       

            

2.css样式.index-pg{padding-bottom:20px;padding-top: 20px;}.index-pg .text1{font-size:16px;color:333;text-align:center;padding:10px 0}.index-pg .text2{font-size:14px;color:333;text-align:center}.index-pg .text1 span,.index-pg .text2 span{color:#2681d9}.index-pg .input-box p{    display: -webkit-box;    display: box;    display:  -webkit-flex;    display: flex;    margin-bottom:15px}.index-pg .input-box p span{width:45px;line-height:30px;}.index-pg .input-box p input{padding:0 5px;color:#666;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9;line-height:25px;}.index-pg .text3{padding:0 35px;color:#2681d9;font-size:14px;}.index-pg .input-box1 p span{width:70px;}.index-pg .input-box1 p select{height:30px;line-height:30px;-webkit-box-flex: 1;-webkit-flex: 1;border:3px solid #2681d9}.index-pg .pg-btn img{width:160px;height:40px;display:block;margin:0 auto;}

3.js代码$('#form1').on('click','.pg-btn',function(){        var form=$('this).data('target-id');    var myform=$('#'+form);    var name=myform.find("[name='username']");    var tel=myform.find("[name='tel']");    //下拉列表选中的选中项文字    var country=myform.find("[name='country_id']").find("option:selected").text();      //检测手机号码   function checkphone(num){      var re = /^1[358][0-9]{9}$/;       if(!re.test(num)){         alert('请您输入正确的手机号码')；         return false;       }      }   //非空验证    if (!$.trim(name.val())) {            layer.msg('请填写姓名');            return false;        };        if (!$.trim(tel.val())) {            layer.msg('请输入电话号码');            return false;        };            var formdata={        name:name,        tel:tel,        country:country        };           $.post(form.attr('action'),formdata,function(res){        var res=JSON.parse(res);        if(res.status==1){            alert('您已经提交成功')；            form.reset();                }else{            alert(‘不好意思，服务器出了点小错误，请您重新提交一次')；            form.reset();                        }                       })})