【问题标题】:How do I save the value of this PHP dropdown using jQuery? [duplicate]如何使用 jQuery 保存这个 PHP 下拉列表的值? [复制]
【发布时间】:2020-05-13 13:11:19
【问题描述】:

我在 PHP 中有这个下拉菜单,我想在 jQuery 中获取选定的值:

        <p>
            Choose device type :
            <?php
            echo "<select id='type_id_selected' name='device_type_id'>";
            echo "<option value='Select'>Select</option>";
            foreach ($dev_type_results as $row) {
                echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";
            }
            echo "</select>"; ?>
        </p>

我尝试使用这个 jQuery 代码,但没有成功:

            <script>
            $('#type_id_selected').change(function() {
                var data = "";
                $.ajax({
                    type: "POST",
                    data: "value=" + $(this).val(),
                    async: false,
                    success: function(response) {
                        data = response;
                        return response;
                    },
                    error: function() {
                        alert('Error occured');
                    }
                });
                var select = $('equipe1');
                select.empty();
                $.each(array, function(index, value) {
                    select.append(
                        $('<option></option>').val(value).html(value)
                    );
                });
            });
        </script>

编辑:我更改了 jquery 代码,现在我可以在 jQuery 中获取数据,但是,我不知道如何以某种方式保存我可以在 PHP 代码中访问的值

<script type="text/javascript">
    $(document).ready(function() {
        $("select.device_type_id").change(function() {
            var selectedType = $(this).children("option:selected").val();
          //  access selectedType in PHP
        });
    });
</script>

【问题讨论】:

  • 然后呢?输出$(this).val(),里面有什么?
  • 还有为什么 async=false?非常糟糕的做法
  • 对于 ajax 代码中的数据,请尝试 data:{value:$(this).val()}。但是这个 var select = $('equipe1'); 是什么?
  • “它不起作用”不是一个好的描述。向我们展示您的尝试。控制台日志给你什么?有什么错误吗?等等现在充其量是模糊的
  • ajax 请求的 URL 也丢失了。

标签: php jquery drop-down-menu html-select


【解决方案1】:

您可以在 JS 中获取值并将 AJAX POST 请求发送到您的 PHP 文件。 HTML

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Testing</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('select.unit').change(function() {
                let selectedUnit = $(this).children("option:selected").val();
                console.log(selectedUnit)
                $.ajax({
                    url: "./data.php",
                    method: "POST",
                    data: {
                        unit: selectedUnit
                    },
                    dataType: "text",
                    success: function(html) {
                        $('#confirmation').html(html);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <select id="choose-first-unit" class="span-four unit">
            <option value="m3">cubic meters</option>
            <option value="cm3">cubic centimeters/milliliters</option>
            <option value="dm3">cubic decimeters/litres</option>
            <option value="hl">hectolitres</option>
            <option value="cl">centilitres</option>
       </select>
    <div id="confirmation"></div>
</body>

</html>

PHP 代码:用于第一个 PHP 文件

<?php
session_start();
$unit = $_POST['unit'];
$_SESSION['unit'] = $unit;
?>

并且在您要访问该值的其他文件中

session_start();
$data = $_SESSION['unit'];

【讨论】:

  • OP 没有提供更多关于什么有效和无效的信息。你的回答没有帮助
  • @Akintunde-Rotimi 检查编辑后的代码,现在我想在 PHP 中检索该值
  • @mr.fartty 是的,我在上面的 PHP 代码中编辑了我的答案检查。
  • @P.Mubeen 我对url: "./data.php", 感到困惑,因为我将它保存在任何地方都可以访问的会话中,所以我真的需要它吗?
  • @mr.fartty 感谢你成功了。
猜你喜欢
  • 2011-10-17
  • 1970-01-01
  • 2018-10-14
  • 2011-03-29
  • 1970-01-01
  • 1970-01-01
  • 2017-10-03
  • 2011-10-14
  • 2018-12-28
相关资源
最近更新 更多