选择一个选择框后加载sql数据？

Posted 2023-05-09

【中文标题】选择一个选择框后加载sql数据？

【英文标题】：Load sql data after making a choose out a select box?

【发布时间】：2019-03-12 06:40:36

【问题描述】：

我有一个问题。 我想实现一些目标，但是我从来没有这样做过，所以很遗憾我不知道如何处理。

在我的屏幕上，我用来自 sql db 的名称填充了一个下拉框。 现在我想，只要从该下拉列表中选择一个名称，就可以加载其他数据，例如最小值和最大值。 例如，我想使用这些值来限制输入字段。 因此，一旦输入字段超出加载的值，输入字段就会变为红色。 但是，我想在不按下表单的提交按钮的情况下使用它。

这可能吗？如果可以，有人可以帮我解决这个问题吗？

我用来填充我的选择框的代码是这样的：

<td>
    <div class="controls">
        <select name="prod" id="employee" onclick="updateBottomValue(this.value);" onchange="mys1()" style="width: 245px;">
            <option value="" disabled selected="selected[]" multiple="multiple">Selecteer Product</option>
            <?php
            $pdo = Database::connect();
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $sql = "SELECT * FROM specsv1 where RActive = 'y' order by RNaam";
            $q = $pdo->prepare($sql);
            $q->execute(array($Id,$RNaam));
            Database::disconnect();
            while ($row = $q->fetch(PDO::FETCH_ASSOC)) 
                echo "<option value='" . $row['Id'] . "'>" . $row['RNaam'] . "</option>";
             
            ?>
        </select>

        <?php if (!empty($ProductError)): ?>
            <span class="help-inline"><?php echo $ProductError;?></span>
        <?php endif; ?>
    </div>

    <span id="selectedValue"></span>
    <input STYLE="width: 6em" name="rrss" type="text"  id='rrss'>
</td>

我必须得到所选名称的代码是这样的：

<script>
    function updateBottomValue(selectedvalue) 
        document.getElementById("selectedValue").innerhtml=selectedvalue;
        document.getElementById('rrss').value = selectedvalue;
    
</script>

【问题讨论】：

使用 Jquery::ajax

【参考方案1】：

是的，这是可能的。

也许这个示例 ajax 可以满足您的需求，请随意修改以满足您的要求。

function viewMinMax(value)

    if (value == 'a')
        tempurl = "https://api.myjson.com/bins/dv40y";
    else if (value == 'b')
        tempurl = "https://api.myjson.com/bins/egjmq";
    

    $.ajax(
        url: tempurl,
        type: "get", 
        dataType: "JSON",
        data: , //this is data you send to your server
        success: function(res)
           
            $('#info').show();
            document.getElementById("info").innerHTML = 'Your min value: ' + res.min + ', Your max value: ' + res.max;

            $('#min').val(res.min);
            $('#max').val(res.max);
        
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <select name="product_select" id="product_select" onchange="viewMinMax(this.value)">
        <option value="">Select Product</option>
        <option value="a">Product A</option>
        <option value="b">Product B</option>
    </select>

    <p id="info" style="display:none;"></p>

    <h3>Load the min & Max</h3>
    <label for="min">Min</label>
    <input type="text" name="min" id="min" value="">
    <br>

    <label for="max">Max</label>
    <input type="text" name="max" id="max" value="">
</form>

忽略tempurl，它可以随着您的操作而改变，以根据您的数据库的价值选择数据。

【讨论】：

这看起来很有希望，但是你用正手填写数据而不是来自 sql server，所以如果我用来自 sql 的数据填充我的选择框，如果我无法填写，我该如何创建函数在价值？

【参考方案2】：

有可能吗？绝对地。有几种方法可以解决它。一种简单的方法是使用jQuery 在dropdown value changes 之后立即触发所谓的AJAX call。 AJAX 调用您的 PHP 脚本并取回一些 HTML，它将在屏幕上的任何位置place。

这是一个很大的话题，很难给你确切的答案，但是谷歌jquery ajax dropdown onchange 你应该能够获得足够的信息来帮助你前进。其中之一是以下（有很多）： jQuery Load form elements through ajax, from onchange event of drop down box