jQuery Mobile：根据列表中的选择更新 MySQL 表中的输入

Question

我正在编写一个 jQuery 移动页面（使用 PHP），它填充了一个 select 元素，它的选项标签带有来自 MySQL 数据库中表的“items”（该表包含 id、items、cost）。使用常用的 mysql_query 和 while mysql_fetch_assoc 方法来回显选项，这很好用。剥离到裸代码：

<?php
    $itemQuery = mysql_query("SELECT shortDesc FROM `items` ORDER BY shortDesc");
?>
<label for="item" class="select">Item:</label>
    <select name="item" id="item" data-native-menu="false">
        <option>Select Item:</option>            
        <?php
            while($temp = mysql_fetch_assoc($itemQuery))
            {
                echo "<option value='".$temp['shortDesc']."'>".$temp['shortDesc']."</option>";
            }
        ?>
    </select>

但是，当用户从列表中选择一个项目时，我希望能够使用 MySQL 表中的实际项目成本更新名为“成本”下方的输入元素，但我不确定该怎么做使用 jQuery/PHP/MySQL。费用输入栏：

<label for="cost">Cost:</label>
<input type="text" name="cost" id="cost" value="" placeholder="Cost (£)"/>

我也不确定我们是否可以从 $itemQuery 中已经返回的结果中以某种方式获取成本值（通过将 SELECT 更改为 shortDesc，cost）保存另一个数据库查询，或者我们是否必须再次查询数据库执行选择，其中用户的选择 = shortDesc。

我怀疑以不同的形式，这是开发人员的共同要求；本质上是根据用户的选择/交互从数据库中获取一些信息。我在 Google 上查看并在这里搜索过，但我不确定我是否使用了正确的搜索词来查找我怀疑在其他地方已经得到解答的内容！

一如既往的帮助非常感谢。

Answer 1

你可以这样做：

1) 遍历您的查询结果并编写您的选项和一些 javascript（我使用关联数组）

<?php
    $result = mysql_query("SELECT shortDesc,costs FROM items ORDER BY shortDesc");
    $options = '';
            $javascript = ''; 
    while ($row = mysql_fetch_assoc($result))
    {
        $options .= '<option value="'.$row['shortDesc'].'">'.$row['shortDesc'].'</option>';
        $javascript .= '\''.$row['shortDesc'].'\' : \''.$row['costs'].'\',';
    }
?>

2) 编写你的 html 和 javascript:

<select id="yourselect">
    <option>select</option>
<?=$options?>
</select>

<label for="cost">Cost:</label>
<input type="text" name="cost" id="cost" value="" placeholder="Cost (£)"/>

3) 编写一些 javascript 来更新您的输入字段：

<script>
    var costs = {<?=$javascript?>};

    $(function() {
    $('#yourselect').change(function() {

    cost = costs[$('#yourselect').val()];

    $('#cost').val(cost);


    });
    });

</script>