javascript - 选择选择框后加载sql数据？

Question

我有一个问题。 我想要实现一些目标，但是，我从未这样做过，所以不幸的是我不知道如何处理这个问题。

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

这可能吗？如果可以的话有人可以帮我吗？

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

<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>

Answer 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，它可以根据您的操作进行更改，以根据数据库的值选择数据。