Javascript 在下拉列表中更改事件_Javascript_Php_Jquery

Javascript 在下拉列表中更改事件

javascript php jquery

Javascript 在下拉列表中更改事件,javascript,php,jquery,Javascript,Php,Jquery,我正在尝试编写一个页面来修改数据库条目。我想将数据库向上拉，并将第3列放入下拉列表中。当从下拉列表中选择一个项目时，我希望从数据库中选择的行中获得信息，以填充表单。我已经填充了下拉列表并开始工作，但我的问题是，我做错了什么，或者您对编写更改事件的建议是什么？我正在尝试使用jQuery更改事件，但我仍在学习，显然我没有正确编码它。我试着从简单开始，只是让它回显所选的项目，以确保我首先有正确的更改，但显然我没有 <?php include("header.html"); inc

我正在尝试编写一个页面来修改数据库条目。我想将数据库向上拉，并将第3列放入下拉列表中。当从下拉列表中选择一个项目时，我希望从数据库中选择的行中获得信息，以填充表单。我已经填充了下拉列表并开始工作，但我的问题是，我做错了什么，或者您对编写更改事件的建议是什么？我正在尝试使用jQuery更改事件，但我仍在学习，显然我没有正确编码它。我试着从简单开始，只是让它回显所选的项目，以确保我首先有正确的更改，但显然我没有

<?php
    include("header.html");
    include("connection.php");
    $query= "SELECT * FROM components";
    if($result = mysqli_query($link, $query)) {
        $item="<p><select name='part' id='inp'>";
        while ($row=mysqli_fetch_array($result)) {
            $item.="<option>".$row[2]."</option>";
        }
        $item.="</select></p>";
    }
?>
<html>
    <body>
        <script>
            $('select').on('change',function () {
                $sel=$(this).value;
            });
        </script>
        <div id="main">
            <div id="test"></div>
            <?php 
            echo $item;
            echo $sel;
            ?>
                <form method = "post">
                    <p><input name="itemnumber" id ="inp" type="text" placeholder="Item #"></p>
                    <p><input name="cost" id ="inp" type="text" placeholder="Price"></p>
                    <p><input name="company" id ="inp" type="text" placeholder="Company"></p>
                    <p><input name="contact" id ="inp" type="text" placeholder="Contact"></p>
                    <p><input name="address1" id ="inp" type="text" placeholder="Address"></p>
                    <p><input name="address2" id ="inp" type="text" placeholder="City / State / Zip"></p>
                    <p><input name="phone" id ="inp" type="text" placeholder="Phone Number"></p>
                    <p><select name="part" id="inp">
                        <option value="select" selected>Choose One</option>
                        <option value="base">Base Product</option>
                        <option value="coating">Coating</option>
                        <option value="topping">Topping</option>
                        <option value="film">Film</option>
                        <option value="corrugate">Corrugate</option>
                    </select></p>
                    <p><input type="submit" name="submit" id="submitbutton" value = "Submit"></p>
                </form>
        </div>
    </body>
</html>
<?php include("footer.html"); ?>

最基本的一点是，在页面真正加载到浏览器中之后，您无法执行php。因此，如果您想在页面加载后执行任何操作，您必须使用在浏览器中执行的javascript，或者使用javascript向服务器发出请求并执行php脚本

这里您的需求很简单，您需要在页面中显示下拉列表的选定值

<script>
$('select').on('change',function () {
    $('#selectedvalue').html($(this).val());
});
</script>


<?php
echo $item;
?>
<div id="selectedvalue"></div>

注意：我希望您在页面中包含jquery库js。基本的问题是，在页面真正加载到浏览器中之后，您无法执行php。

<script>
$('select').on('change',function () {
    $('#selectedvalue').html($(this).val());
});
</script>


<?php
echo $item;
?>
<div id="selectedvalue"></div>

因此，如果您想在页面加载后执行任何操作，您必须使用在浏览器中执行的javascript，或者使用javascript向服务器发出请求并执行php脚本

这里您的需求很简单，您需要在页面中显示下拉列表的选定值

<script>
$('select').on('change',function () {
    $('#selectedvalue').html($(this).val());
});
</script>


<?php
echo $item;
?>
<div id="selectedvalue"></div>

注意：我希望您在服务器上执行的PHP页面中包含jquery库js，您不能在服务器上回显javascript变量，此时页面已离开服务器并位于浏览器端。注意，ID必须是唯一的。听起来您需要使用$this.val而不是$this。value@j08691谢谢，我把身份证换成了班级，我使用它是为了CSS的目的，因为输入boxesPHP在服务器上执行，你不能在服务器上回显javascript变量，那时页面已经离开了服务器并保存在浏览器端。注意，ID必须是唯一的听起来你需要使用$this.val而不是$this。value@j08691谢谢，我把身份证换成了班级，我在输入框中使用它是出于CSS目的。当我将它输入到JSFIDLE时，该解决方案非常有效，因此我知道您的代码是正确的，但由于某些原因，它在我的实际页面上不起作用：-这告诉我有一个单独的错误，我似乎找不到：-我正在使用上面的代码，并建议您进行更正。我确实包括jQuery库，它位于header.html文件的内部。我在我的页面上查看了源代码，以确保它正在被添加，并且确实如此。你知道为什么会这样吗？我一直盯着我的代码，仍然找不到我的错误。我将代码转储到JSbin中，以便您可以看到完全更新的代码。忽略输出窗口，因为它显然无法正常工作。在chrome中打开页面，按F12打开开发者工具并检查控制台是否存在任何javascript错误当我将其输入JSFIDLE时，该解决方案非常有效，因此我知道您的代码是正确的，但由于某些原因，它无法在我的实际页面上工作：-这告诉我有一个单独的错误，我似乎找不到：-我正在使用上面的代码，根据你的建议进行修改。我确实包括jQuery库，它位于header.html文件的内部。我在我的页面上查看了源代码，以确保它正在被添加，并且确实如此。你知道为什么会这样吗？我一直盯着我的代码，仍然找不到我的错误。我将代码转储到JSbin中，以便您可以看到完全更新的代码。忽略输出窗口，因为它显然无法正常工作。在chrome中打开页面，按F12打开开发者工具并检查控制台是否有javascript错误

<script>
$('select').on('change',function () {
    $('#selectedvalue').html($(this).val());
});
</script>


<?php
echo $item;
?>
<div id="selectedvalue"></div>