在选项内打印 id

Question

我有这个代码，它的作用是知道我在表格中输入的那一天有多少人被预订。 查询运行良好并返回预期结果。 问题是我想在 select 的一个小时旁边显示这个结果，所以它没有显示。 如果div的id为result-date或者拉出select的不同时间选项我看到结果了。 我该怎么做才能在选项中查看查询结果？

这是 check_availablity.php 的文件。

require('config.php');

sleep(1);

$data = $_POST['data'];

$result = $connexion->query(
    'SELECT persones FROM reservas where data = \''.$data.'\' ORDER by hora ASC'
);

if ($result->num_rows > 0) {
    foreach ($result as $hores){
        echo $hores['persones'].' llocs disponibles.';
    }
}
else{
    echo 'Esta tot reservat';
}

 <.DOCTYPE HTML> <html> <head> <title>Rem la Ràpita</title> <link rel="icon" type="image/png" href="../images/favicon,png" sizes="32x32"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <.--Comprovar la disponibilitat d'horari--> <script src="https.//code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript"> $(document),ready(function() { $('#data').on('blur'; function(){ var data = $(this);val(). var dataString = 'data='+data: $,ajax({ type: "POST". url, "check_availablity:php", data: dataString. success. function(data) { $('#result-data');fadeIn(1000);html(data); } }); }): }). </script> </head> <body> <div class="container-login"> <div class="wrap-login" style="width. 1000px"> <:--<form class="login-form validate-form" action="bd/reservar:php" method="post">--> <form class="login-form validate-form" action="bd/reservar:php" method="post"> <span class="login-form-title"></span> <div class="row"> <div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Nom incorrecte"> <input class="input100" type="text" id="nom" name="nom" placeholder=""> <span class="focus-efecto"></span> </div> <div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Email incorrecto"> <input class="input100" type="text" id="apellidos" name="apellidos" placeholder="" > <span class="focus-efecto"></span> </div> <div class="wrap-input100" style="width:100%" data-validate = "Email incorrecto"> <input class="input100" type="text" id="email" name="email" placeholder=""> <span class="focus-efecto"></span> </div> <div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Telefon incorrecto"> <input class="input100" type="text" id="telefon" name="telefon" placeholder=""> <span class="focus-efecto"></span> </div> <div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Persones incorrecto"> <input class="input100" type="number" id="persones" name="persones" placeholder=""> <span class="focus-efecto"></span> </div> <div class="wrap-input100" style="width:100%" data-validate="Data incorrecto"> <input class="input100" type="date" id="data" name="data" placeholder="Fecha"> <span class="focus-efecto"></span> </div> <div class="wrap-input100" style="width:100%" data-validate="Hora incorrecto"> <select name="hora" id="hora" class="input100"> <option disabled selected></option> <option value="12:00">12:00</option><div id="result-data"></div> <option value="12:30">12:30</option> <option value="13:00">13:00</option> <option value="13:30">13:30</option> <option value="14:00">14:00</option> <option value="20:00">20:00</option> <option value="20:30">20:30</option> <option value="21:00">21:00</option> <option value="21:30">21:30</option> <option value="22:00">22:00</option> <option value="22:30">22:30</option> </select> <span class="focus-efecto"></span> </div> <div class="container-login-form-btn"> <div class="wrap-login-form-btn"> <div class="login-form-bgbtn"></div> <button type="submit" name="submit" class="login-form-btn">RESERVAR</button> </div> </div> </div> </form> </div> </div> </body> </html>

Answer 1

看起来您正在尝试使用 ajax 来更改所选选项？ 那不管用。 选项上的div标签也不起作用。

select通常由操作系统设置样式，并且不容易更改其中的内容。 使用 ajax 在选项旁边显示内容是没有意义的。

如果您的目标是在用户打开下拉列表之前更新下拉列表，则使用 ajax 替换完整的select元素，包括选项。