jQuery在从数据库中选择下拉列表时更改变量的值

Question

我正在做一个项目，我现在陷入了困境。我需要使用 jQuery 在选择下拉列表时实时更改 DIV 的值。

例子：

我想要这个：-

<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>

<div id="chpln">Clicks: 0 clicks</div>

当我选择选项 1 时，该值将在 DIV live 中代替 0 显示。问题是，当这个选择值从数据库中获取数据时，我不明白该怎么做。

例子：

<select name="" id="pln" class="select-box" style="margin-top: -40px;"  />
  <?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
  <option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
  <?php } ?>
</select>

我目前使用的jQuery：-

$(document).ready(function(){
    $("#pln").click(function(){
        $("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
    });
});

这个 jquery 当前正在更改值，但我只得到数据库的第一个值，即 10。当我选择不同的选项时，它仍然显示数据库中的第一个值，即 10，而它实际上应该显示第二个值那是20。请帮助我。 FIDDLE 将不胜感激。

Answer 1

使用jQuery Ajax 请求php文件..

并使用.change() 而不是.click() 来更改下拉值..

代码将被放置在 JS 文件中，该文件对您服务器上的 php 文件进行 ajax 调用..

php 文件将获取一些参数（如果有）并对数据库执行选择查询并在响应中返回结果.. 在 php 中使用json_encode(data) ..

这些示例也可能有所帮助： http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php http://www.plus2net.com/php_tutorial/php_drop_down_list.php

您会发现许多其他示例 - 只需 Google 即可了解关键概念！

希望这会有所帮助。

Answer 2

对于下拉菜单，click(function() 不适用。使用change(function()。

我给了你两种方式。使用任何一种。

I) 方法 - 1（使用 Ajax）

<select name="" id="pln" class="select-box" style="margin-top: -40px;"  />
  <?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
    <option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
        <?php echo $ac_fetch['adclk_clicks']; ?> clicks
    </option>
  <?php } ?>
</select>

<div id="chpln">Clicks: 0 clicks</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $('.select-box').change(function(){
       var selectBoxClicks = $('.select-box').val();
       $.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
         $('#chpln').html(result);
       }});
  });
</script>

新建一个页面，即AjaxShowClickValue.php。

AjaxShowClickValue.php（请确保，如果您在此处更改页面名称。然后，也要更改<script></script> 标签。两者都是相关的。）

<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>

II) 方法 - 2

<select name="" class='select-box'>
    <option value="10">10 clicks</option>
    <option value="20">20 clicks</option>
    <option value="30">30 clicks</option>
    <option value="40">40 clicks</option>
</select>

<div id="chpln">Clicks: 0 clicks</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $('.select-box').change(function(){
         $("#chpln").text("Clicks: "+$(this).val()+" clicks");
  });
</script>

Answer 3

点击是选择框的错误事件 您可以将更改事件用于您的结果。

$(document).ready(function(){
    $("#pln").change(function(){
        $("#chpln").text("Plan: "+$(this).val()+" secs");
    });
});