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

单击是选择框的错误事件你可以利用改变事件来获得结果。

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

Answer 2

对于下拉列表，click(function()不适用。使用change(function()。

我给了你2路。使用任何一个。

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

使用jQuery Ajax向php文件发出请求..

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

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

php文件将采用一些参数（如果有的话）并对数据库执行select查询并在响应中返回结果..在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 It并理解关键概念！

希望这有帮助。

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

3 个答案: