javascript - 选择选项时如何防止单击事件执行？

Question

我有一个在输入商店和日期范围时动态填充的选择，我对其进行配置，以便在单击事件按下相同的选择后，与员工一起完成选择。问题出现了，当我加载员工列表并选择任何一个时，ajax 请求会再次执行，它会自动将我更改为列表中的第一个。一个例子是，当我单击选择时，它会显示 a、b 和 c，当我单击 c 时，它会选择 a。我在某些页面上阅读过有关使用 one 事件的信息，但问题是，如果我更改商店，我仍然会看到首先选择的商店的员工，我也尝试了更改事件，但它没有直接填充员工，我用e.preventDefault、e.stopImmediatePropagation和e.stopPropagation()试过了，还是不行。我分享代码，看看你是否可以帮助我。非常感谢。

$(document).ready(function(){
                $("#user").on("click", function(e) {
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                    fillUser(store,dFec,hFec);
                });
            });
function fillUser(store,dFec,hFec){
            var request = $.ajax({
                                url: "getUser.php",
                                method: "POST",
                                data: {store: store, dFec:dFec, hFec:hFec},
                                dataType: "html",
                                error: function(){
                                    alert("error");
                              },
                            });
                            request.done(function( msg ) {
                                $( "#user" ).html(msg);
                                });
                    }

HTML

            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">Store</h5>
            <div class="form-group text-center">
                <select name="store" id="store" class="form-control form-control-sm" style="width:35%; margin:auto;">
                    <option value="0">Select Store</option>
                        <?php while($row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC)) { ?>
                            <option value="<?php echo $row['id_store']; ?>"><?= $row['nameStore']; ?></option>
                        <?php } ?>
                </select>
            </div>
            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">Fecha</h5>     
            <table class="table table-sm text-center" style="margin:auto; width:35%">
                <tr>
                    <th>From</th>
                    <th>To</th>
                </tr>
            <tr>
                <div id="picker"></div>
                <td><input name="dFec" id="dFec" readonly="readonly" style="text-align:center"></td>
                <div id="picker1"></div>
                <td><input name="hFec" id="hFec" readonly="readonly" style="text-align:center"></td>
            </tr>
    <div id="other">
    </div>
</table>

            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">user</h5>
                <div class="form-group text-center">
                    <select name="user" id="user" class="form-control form-control-sm" style="width:35%; margin:auto;"></select>
                </div>

获取Usuario.php

//query and stmt are at beggining of the code
    $store = $_POST['store'];
    $dFec = date("Ymd", strtotime($_POST['dFec']));
    $hFec = date("Ymd", strtotime($_POST['hFec']));

    while ($rowB = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
    {
        $html.= "<option value='".$rowB['user']."'>".$rowB['user']."</option>";
    }
        echo $html;

标签： javascriptphpjquerynode.jsajax

Answer 1

改变一些东西并让它以这种方式工作，我希望它会为其他需要它的人服务。我感谢您的合作。问候

            $(document).ready(function(){
                $("#store").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                }); 

            $(document).ready(function(){
                $("#hFec").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                }); 
                
            $(document).ready(function(){
                $("#dFec").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store = $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                });