注册 登录
编程论坛 → PHP技术论坛

请教：input插入下拉菜单时,如何判断是否选定了下拉菜单的其中一项？如没有选定，则给出弹窗提示

webser2010 发布于 2018-11-21 11:12， 2879 次点击
请教：input插入下拉菜单时,如何判断是否选定了下拉菜单的其中一项？如没有选定，则给出弹窗提示      原程序如下，谢谢指点

程序代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="{RES}css/wei_canyin.css" media="all" />
<link rel="stylesheet" type="text/css" href="{RES}css/wei_dialog.css" media="all" />
<link rel="stylesheet" type="text/css" href="{RES}css/datepicker_canyin.css" media="all" />
<script type="text/javascript" src="{RES}js/jQuery.js"></script>
<script type="text/javascript" src="{RES}js/wei_webapp_v2_common.js"></script>
<script type="text/javascript" src="{RES}js/bootstrap-datepicker_canyin.js"></script>
<title>我的订单</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <style type="text/css">
<!--
.STYLE1 {
    color: #FF0000;
    font-weight: bold;
}
-->
    </style>
</head>
<body id="page_intelOrder" class="myOrderCon">
    <style>
    .btn_common{
        font-size:12px;
        padding: 5px 8px;
        border: 0;
        border-radius: 2px;
        cursor: pointer;
        background-color: #2ec366;
        color: #fff;
    }
    .dish_item textarea{
        padding: 8px;
        background: #eaeaea;
        border-radius: 12px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-shadow: none;
        display:none;
    }
    .dish_item{
        height:45px!important;
    }
    .dish_item.on{
        height:97px!important;
    } .dish_item.on textarea{
        margin-top:3px;
        display:block;
    }
</style>



<header  style="padding-top:20px;">
    <span class="pCount" style="">已点<l style="color:red" id="countnums" nums="{$totalnum}">{$totalnum}</l>个</span>
    <label><i>共计：</i><b class="duiqi" id="total"></b><b class="duiqi">元</b></label>
</header>

<section style="margin-bottom:10px;">
    <article>
        <h2>我的订单
            <button class="btn_add emptyIt" id="clearBtn" onClick="clearAll();">清空</button>
            <button class="btn_add" onClick="location.href = '{php echo  $this->createMobileUrl('wlindex')}'">+添加</button>
        </h2>
        <ul id="myorder" class="myorder">
            <!---->
        </ul>
    </article>
</section>
<section style="margin-bottom:40px;">
    <article>
        <form id="form_dish" action="{php echo  $this->createMobileUrl('wlorder',array('d'=>'checkout'))}" method="post" target="hide"  >
            <input type="hidden" name="id" value="14511" />
            <table class="table_book">
                <tr>
                    <td width="80px" style="width:80px;">手机号码：</td>
                    <td colspan="2"><input type="tel" id="tel" name="tel" value="{$fans['mobile']}" maxlength="20" placeholder="(必填*)请输入您的手机号码" style="width:200px;" class="input_text"/></td>
                </tr>
                <tr>
                    <td style="width:80px;">用户姓名：</td>
                    <td style="width:50%;">
                        <input type="text" name="guest_name" id="guest_name" value="{$fans['nickname']}" placeholder="(必填*)请输入您的真是姓名" maxlength="10" style="width:100px;" class="input_text"/>
                    </td>
                    <td>
                        <div class="group_checkbox" style="width:70px;display:inline;">
                            <input type="checkbox" value="1" name="sex" {if $fans['gender']==1}checked="checked"{/if} />
                        </div>
                    </td>
                </tr>
                <tr>
                    {php $hour=date('H');}
                    <td style="width:80px;">预约时间：</td>
                    <td colspan="2">
                        <input id="dpd1" type="text" name="time_day" readonly="readonly" style="width:80px;"/>
                        <select name="time_hour">
                                                            <option value="01" {if $hour=='01'}selected{/if}>01时</option>
                                                            <option value="02" {if $hour=='02'}selected{/if}>02时</option>
                                                            <option value="03" {if $hour=='03'}selected{/if}>03时</option>
                                                            <option value="04" {if $hour=='04'}selected{/if}>04时</option>
                                                            <option value="05" {if $hour=='05'}selected{/if}>05时</option>
                                                            <option value="06" {if $hour=='06'}selected{/if}>06时</option>
                                                            <option value="07" {if $hour=='07'}selected{/if}>07时</option>
                                                            <option value="08" {if $hour=='08'}selected{/if}>08时</option>
                                                            <option value="09" {if $hour=='09'}selected{/if}>09时</option>
                                                            <option value="10" {if $hour=='10'}selected{/if}>10时</option>
                                                            <option value="11" {if $hour=='11'}selected{/if}>11时</option>
                                                            <option value="12" {if $hour=='12'}selected{/if}>12时</option>
                                                            <option value="13" {if $hour=='13'}selected{/if}>13时</option>
                                                            <option value="14" {if $hour=='14'}selected{/if}>14时</option>
                                                            <option value="15" {if $hour=='15'}selected{/if}>15时</option>
                                                            <option value="16" {if $hour=='16'}selected{/if}>16时</option>
                                                            <option value="17" {if $hour=='17'}selected{/if}>17时</option>
                                                            <option value="18" {if $hour=='18'}selected{/if}>18时</option>
                                                            <option value="19" {if $hour=='19'}selected{/if}>19时</option>
                                                            <option value="20" {if $hour=='20'}selected{/if}>20时</option>
                                                            <option value="21" {if $hour=='21'}selected{/if}>21时</option>
                                                            <option value="22" {if $hour=='22'}selected{/if}>22时</option>
                                                            <option value="23" {if $hour=='23'}selected{/if}>23时</option>
                                                            <option value="24" {if $hour=='24'}selected{/if}>24时</option>
                                                    </select>
                        <select name="time_second">
                                                            <option value="00">00分</option>
                                                            <option value="10">10分</option>
                                                            <option value="20">20分</option>
                                                            <option value="30">30分</option>
                                                            <option value="40">40分</option>
                                                            <option value="50">50分</option>
                                                            <option value="60">60分</option>
                                                    </select>
                    </td>
                 </tr>
                {if $mycoupons}
                <tr>
                    <td style="width:80px;">优惠券：</td>
                    <td colspan='2'>
                        <select name="coupon_id">
                            <option value="">选择优惠券</option>
                            {loop $mycoupons $coupon}
                            <option value="{$coupon['coupon_id']}">{$coupon['coupon_name']}(满{$coupon['total_money']}抵{$coupon['discount_money']}元)</option>
                            {/loop}
                        </select>
                    </td>
                 </tr>
                {/if}
                <tr>
                    <td style="width:80px;">类型：</td>
                    <td colspan="2">
                        <div class="group_radio">
                            {php $isordertype=1}
                            {if $set['ordretype2']==1}
                            <span >
                                <input type="radio" name="order_type" value="2" {if $isordertype==1}checked="checked"{/if} />
                                <label>店内</label>
                            </span>
                            {php $isordertype=0}
                            {/if}
                            {if $set['ordretype1']==1}                           
                            <span>
                                <input type="radio" name="order_type" value="1" {if $isordertype==1}checked="checked"{/if} />
                                <label>外卖</label>
                            </span>
                            {php $isordertype=0}
                            {/if}
                            {if $set['ordretype3']==1}   
                            <span>
                                <input type="radio" name="order_type" value="3" {if $isordertype==1}checked="checked"{/if} />
                                <label>自提</label>
                            </span>
                            {php $isordertype=0}
                            {/if}
                        </div>
                    </td>
                </tr>
                <tbody id="out" style="display:none">
                {if empty($set['address_list'])}
                <tr>
                    <td width="80px" style="width:80px;">送货地址：</td>
                    <td colspan="2">
                        <input type="text" id="text" name="address" value="{$fans['address']}" placeholder="请输入您的详细收货地址" class="input_text" style="desplay:inline"/></td>
                </tr>
                {else}
                    {php $arr=explode(PHP_EOL,$set['address_list']);}
                <tr>
                    <td width="80px" style="width:80px;">送货地址：</td>
                    <td colspan="2">
                        <select name="pre_address" style="width:120px">
                            {loop $arr $v}
                            <option value="{$v}">{$v}</option>
                            {/loop}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="80px" style="width:80px;"></td>
                    <td colspan="2">
                    <input type="text" id="text" name="address" value="{$fans['address']}" placeholder="请输入您的详细收货地址" class="input_text" style="desplay:inline"/></td>
                </tr>
                {/if}
                </tbody>
                <tbody id="in">
                <tr>
                    <td style="width:80px;">预定人数：</td>
                    <td colspan="2">
                        <input type="number" name="nums" id="nums" value="1" min="1" maxlength="3" style="width:100px;" class="input_text"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:80px;">就餐形式：</td>
                    <td colspan="2">
                        <div class="group_radio">
                            <span >
                                <input type="radio" name="seat_type" value="1" checked="checked" />
                                <label>大厅</label>
                            </span>
                            <span>
                                <input type="radio" name="seat_type" value="2" />
                                <label>前台单</label>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr id="t_desk">
                    <td style="width:80px;">桌号：</td>
                  <td colspan="2">
                        
                        {if empty($set['desk_list'])}
                            <input type="text" name="desk_t" id="desk_t"  value=""  maxlength="5" placeholder="请填写您的桌号，不清楚可以联系店员" style="width:120px;" class="input_text"/>
                        {else}
                            {php $arr=explode(PHP_EOL,$set['desk_list']);}
                          <select name="desk_t" style="width:120px" id="classes">
                                <option style='display: none' ></option>
                                {loop $arr $v}
                                <option value="{$v}">{$v}</option>
                                {/loop}
                            </select>
                           
                      {/if}
                        
        
        
                        
                    <span class="STYLE1">* 请选择桌号码 * </span></td>
                </tr>
                <tr id="t_room" style="display:none">
                    <td style="width:80px;">前台单：</td>
                    <td colspan="2">
                        
                        {if empty($set['room_list'])}
                            <input type="text" name="room_t" id="room_t" value="" maxlength="5" placeholder="请填写您的前台单，不清楚可以联系店员" style="width:120px;" class="input_text"/>
                        {else}
                        {php $arr=explode(PHP_EOL,$set['room_list']);}
                        <select name="room_t" style="width:120px">
                            {loop $arr $v}
                            <option value="{$v}">{$v}</option>
                            {/loop}
                        </select>
                        {/if}
                        
                    </td>
                </tr>        
                </tbody>
            <tr>
                    <td style="width:80px;vertical-align:top;line-height:25px;">备注说明：</td>
                    <td colspan="2">
                        <textarea name="remark" style="height:60px;" maxlength="100" placeholder="如有附加需求，请备注，店小二会尽量安排" class="input_text"></textarea>
                    </td>
                </tr>
            </table>
            <footer>
                <input type="hidden" name="totalnum" id="totalnum" value="{$totalnum}">
                <input type="hidden" name="totalprice" id="totalprice">
                <input type="hidden" name="params" id="params">
                {if !empty($shopping_fans)&&$shopping_fans['status']==0}
                <input type="button" value="系统正忙,请稍后" class="btn_2"/>
                {else}
                    {if $status}
                <input type="button" value="下一步" class="btn_2" id="submit_form" />
                    {else}
                <input type="button" value="下一步" class="btn_2" id="submit"/>
                    {/if}
                {/if}
            </footer>
        </form>
    </article>
</section>

</div>
{template wl_footer}
<script>var pageName = 'menuFilled';</script>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        getAllMenu();
        //
        var now = new Date();
        var nowArr = [now.getFullYear(), now.getMonth() + 1, now.getDate()];
        $("#dpd1").each(function(k, v) {
            var ndate = $(v).datepicker({
                format: "yyyy/mm/dd",
                onRender: function(date) {
                    var t1 = new Date(date.valueOf());
                    var t2 = new Date(now.valueOf());
                    t1 = t1.getFullYear() + "/" + (t1.getMonth() + 1) + "/" + t1.getDate();
                    t2 = t2.getFullYear() + "/" + (t2.getMonth() + 1) + "/" + t2.getDate();
                    return (t1 != t2 && (date.valueOf() < now.valueOf())) ? 'disabled' : '';
                }
            }).on("changeDate", function(date) {
                if ('days' == date.viewMode) {
                    ndate.datepicker('hide');
                }
            });
            v.value = nowArr.join("/");
        });
        //
    }, false);
    window.addEventListener("DOMContentLoaded", function() {
        getAllMenu();
    }, false);
    //
    function getAllMenu() {
        MLoading.show('加载中');
        var params = {}
        _doAjax('{php echo  $this->createMobileUrl('wldishlist',array('subcp'=>'cart'))}', 'POST', params, function(res) {
            MLoading.hide();
            window.res = {
                data: res
            }
            switchMenu();
        });
    }
    function addToMenu(){
            var params = '[';
            for(var key in window.selected.dishes){
                params += '{"dishes_id":'+ key + ",",
                params += '"price":'+ window.selected.dishes[key].price + ",",
                params += '"nums":'+ window.selected.dishes[key].num + "},"
            }
            params = params.replace(/,$/, "");
            params += ']';

            $.ajax({
                'url':'{php echo  $this->createMobileUrl('wldishlist')}',
                'data':{'order':params},
                'type':'POST',
                'async':'false',
                'success':function(db){
                   // location.href='';
                }
            });
        }
    function switchMenu() {
        var TPL = '<li class="dish_item">\
                    <span class="dishName">{name}</span>\
                    <i>{price}元/{unit}</i>\
                    <div><textarea name="description" onblur="changeDescription(this, event, {dishes_id});">{description}</textarea></div>\
                    <section class="bbox" dishname="{name}" onclick="changeCount(this, event, {dishes_id});">\
                        <input class="btn-reduce" type="button" value="-">\
                        <input class="numBox" name="numBox" type="text" value="{selected_count}" price="{price}" readonly="readonly">\
                        <input type="button" class="btn-plus" value="+">\
                    </section>\
                    </li>';
        var myorder = document.getElementById("myorder");
        var totalPrice = 0;
        myorder.innerHTML = iTemplate.makeList(TPL, window.res.data, function(k, v) {
            if (v.discount_price) {

                v.price = v.discount_price;
            }
            totalPrice += parseFloat(v.price) * parseInt(v.selected_count);
            return {
                description: v.description || ""
            }
        });
        $("#totalprice").val(totalPrice);
        document.getElementById("total").innerHTML = (totalPrice).toFixed(2);
    }



    function changeCount(thi, evt, dishes_id) {
        if ("button" == evt.target.type) {
            var counter = thi.querySelectorAll("input[name='numBox']")[0];
            var val = parseInt(counter.value);
            var countnums = parseInt($("#countnums").attr("nums"));
            if ("btn-reduce" == evt.target.className) {
                val--;
            } else {
                val++;
            }
            
            if(val >= 0){
                if ("btn-reduce" == evt.target.className) {
                    var num = countnums - 1;
                    var action=1;
                } else {
                    var num = countnums + 1;
                    var action=0;
                }

                $.post("{php echo $this->createMobileUrl('wlupdatecart');}", {"dishes_id":dishes_id,"total": val,"action":action},function(data){
                    if(data.message.status==1){
                        //数据成功
                        counter.value = Math.max(0, val);

                        document.getElementById("countnums").innerHTML = num;
                        document.getElementById("num").innerHTML = num;
                        
                        $("#countnums").attr("nums",num);
                        $("#totalnum").val(num);
                        var totalPrice = 0;
                        for (var i = 0, ci; ci = window.res.data[i]; i++) {
                            if (dishes_id == ci.dishes_id) {
                                ci.selected_count = counter.value;
                                //break;
                            }
                            totalPrice += parseFloat(ci.price) * parseInt(ci.selected_count);
                        }
                        $("#totalprice").val(totalPrice);
                        document.getElementById("total").innerHTML = (totalPrice).toFixed(2);
                    }else{
                        //数据失败
                        alert(data.message.message);
                        //alert('error');
                        
                    }
                }, "json");
            }else{
                alert('数量已经小于0');
            
            }
           
         
            //switchMenu();
        }
    }



    function changeDescription(thi, evt, dishes_id) {
        for (var i = 0, ci; ci = window.res.data[i]; i++) {
            if (dishes_id == ci.dishes_id) {
                ci.description = thi.value;
                break;
            }
        }
    }
    //
    function clearAll() {
        MDialog.confirm(
                '', '是否清空菜单？', null,
                '确定', function() {
                    $.ajax({
                        'url': '{php echo  $this->createMobileUrl('wldishlist',array('subcp'=>'clear'))}',
                        'success': function(db) {
                            $('#myorder').empty();
                            $('#total').text('0');
                            $('#num').text('0');
                           
                        }
                    });

                }, null,
                '取消', null, null,
                null, true, true
                );
    }
    //

    function slideOn(thi, evt) {
        var li = $(thi).closest("li");
        li["toggleClass"]("on");
    }
   
    $(':radio[name="seat_type"]').click(function () {
        seat_type=$(':radio[name="seat_type"]:checked').val();
         if(seat_type==2){
            $("#t_room").show();
            $("#t_desk").hide();
        }else{
            $("#t_room").hide();
            $("#t_desk").show();
        }
    });
    $(':radio[name="order_type"]').click(function () {
        order_type=$(':radio[name="order_type"]:checked').val();
        if(order_type==3){
            $("#out").hide();
            $("#in").hide();
        }else if(order_type==2){
            $("#in").show();
            $("#out").hide();
        }else{
            $("#in").hide();
            $("#out").show();        
        }
     });

</script>

<script type="text/javascript">
    $(function() {
        $('#submit').click(function() {
            alert("请在{$set['yy_start_time']}~{$set['yy_end_time']}下单");
        });
        $('#submit_form').click(function() {
            if($("#tel").val() == ''){
                alert("请输入手机号码");return false;
//                MDialog.alert(null, "请输入手机号码", null, "确定");
//                return false;
            }
            
            if($("#guest_name").val() == ''){
                alert("请输入用户姓名");return false;
//                MDialog.alert(null, "请输入用户姓名", null, "确定");
//                return false;
            }
            
   
   
            
            
                    
            
            
            
            
           
            if (null == $('#nums').val().match(/^[0-9]*[1-9][0-9]*$/)) {
                alert("请输入正确的预定人数");return false;
                MDialog.alert(null, "请输入正确的预定人数", null, "确定");
                return false;
            }
            order_type=$(':radio[name="order_type"]:checked').val();
            if(order_type==1){
                //外卖的时候验证地址
                $address=$('#text').val();
                if($address==''){
                    alert("请输入送货地址");
                    return false;
                }
            }
     
            var price = 0;
            for (var i = 0, ci; ci = window.res.data[i]; i++) {
                price += parseFloat(ci.price);
            }
            if(price  <= 0){
                alert("订单价格有误，请重新下单");return false;
            }
            var params = '[';
            for (var i = 0, ci; ci = window.res.data[i]; i++) {
                params += '{"dishes_id":' + ci.dishes_id + ','
                params += '"price":' + ci.price + ','
                params += '"description":"' + (ci.description || '') + '",'
                params += '"nums":' + ci.selected_count + '},'
            }
            params = params.replace(/,$/, "");
            params += ']';
            $("#params").val(params);
            MLoading.show('加载中');
            $.ajax({
                'url': $('#form_dish').attr('action'),
                'data': $('#form_dish').serialize(),
                'type': 'post',
                'dataType': 'json',
                'success': function(data) {
                    MLoading.hide();
                    if(data.status==1){
                        window.location = data.url;
                    }else{
                        alert(data.msg);
                        return false;
                    }
                }
            });
        });
    });

</script>
<script>
    $(document).ready(function(){
        $('#my_menu').click(function(){
            $("#mLoading").hide();
        });
        order_type=$(':radio[name="order_type"]:checked').val();
        if(order_type==3){
            $("#out").hide();
            $("#in").hide();
        }else if(order_type==2){
            $("#in").show();
            $("#out").hide();
        }else{
            $("#in").hide();
            $("#out").show();        
        }
    });
     $('.input_text').focus(function() {
        $("#footer_menu").css("display","none");
      });
    $('.input_text').blur(function() {
        $("#footer_menu").css("display","");
     });
</script>

 
</html>


[此贴子已经被作者于2018-11-21 11:15编辑过]

7 回复
#2
webser20102018-11-21 11:14
程序代码：
<tr id="t_desk">
                    <td style="width:80px;">桌号：</td>
                  <td colspan="2">
                        
                        {if empty($set['desk_list'])}
                            <input type="text" name="desk_t" id="desk_t"  value=""  maxlength="5" placeholder="请填写您的桌号，不清楚可以联系店员" style="width:120px;" class="input_text"/>
                        {else}
                            {php $arr=explode(PHP_EOL,$set['desk_list']);}
                          <select name="desk_t" style="width:120px" id="classes">
                                <option style='display: none' ></option>
                                {loop $arr $v}
                                <option value="{$v}">{$v}</option>
                                {/loop}
                            </select>
                           
                      {/if}
                        
        
        
                        
                    <span class="STYLE1">* 请选择桌号码 * </span></td>
                </tr>



我现在需要判断是否选择了桌号，如没有选择，则弹窗提示，
#3
icecool2018-11-21 11:48
判断document.getElementsByName("desk_t")[0].value;值是否为空。
#4
webser20102018-11-21 14:41
回复 3楼 icecool
程序代码：
<script type="text/javascript">
     if($("#desk_t").val() == ''){
                alert("请输入桌号");return false;

            }
</script>

具体怎么写?请指点一下，我试了好久都不行，要么不检测，要么选择了桌号后还是提示没选。谢谢

[此贴子已经被作者于2018-11-21 15:05编辑过]
#5
icecool2018-11-21 15:59
你这里动态数据，我没法给你改。
你这里的选择器也不对：($("#desk_t")这是选不到元素的，你可以用ID选，即$("#classes")
看下下面这样是不是你要的效果：
程序代码：

<html>
<HEAd>
<title>test</title>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(document).ready(function(){
         $("SPAN.submit").click(function(){
             desk_NO=$("#classes").val();   
             if(desk_NO==""){
                 alert("桌号不能为空");
                 return false;
             }
             $("#temp_txt").val(desk_NO);
         });
});

</script>
</head>

<body>

<select name="desk_t" style="width:120px" id="classes">
        <option style='display: none' ></option>
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
        <option value="5">e</option>
</select>

<span class="submit">提交</span>
<br><input type="text" id="temp_txt">
</body>
</html>
#6
webser20102018-11-21 16:13
回复 5楼 icecool
我也可以不用动态数据，

程序代码：
<tr id="t_desk">
                    <td style="width:80px;">桌号：</td>
                  <td colspan="2">
                        
                    
                          <select name="desk_t" style="width:120px" id="classes">
                                <option style='display: none' ></option>
                                
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                           
                            </select>
                    



                    <span class="STYLE1">* 请选择桌号码 * </span></td>
                </tr>
#7
webser20102018-11-21 16:14
回复 5楼 icecool
谢谢，我试一下。

------------
不好意思，我还是没搞好
<script type="text/javascript" src="jQuery.js"></script>，另外 这个文件？

[此贴子已经被作者于2018-11-21 16:21编辑过]
#8
icecool2018-11-21 16:24
你自已的页面里就有用到这个文件啊，
网上找一下jquery.js,版本随意，新点好些。
只有本站会员才能查看附件，请 登录


你在你判断用户名的代码下加如下代码：

              desk_NO=$("#classes").val();   
               if(desk_NO==""){
                       alert("桌号不能为空");
                 return false;
             }

[此贴子已经被作者于2018-11-21 16:34编辑过]
1
©2025, BCCN.NET
电脑版