我们如何使用数据库动态更改一些下拉列表？

尝试从mysql数据库动态更改下拉列表值。脚本似乎在工作，但我不确定。该数据库列ID，columnA，columnB，columnC，columnD我们如何使用数据库动态更改一些下拉列表？

在第二个下拉列表选择，它提供了警报“喜试”。

$(document).ready(
function() { 
$(".columnA").change(
function() { 
    var dataA=$(this).val(); 
    var dataString = 'columnA='+ dataA; 
    $.ajax ( { 
        type: "POST", 
        url: "ajax_try.php", 
        data: dataString, 
        cache: false, 
        success: function(html) 
        { 
         $(".columnB").html(html); 
        }  
       }    
      ); 

      } 
    ); 

$(".columnB").change(
function() { 
    var dataB=$(this).val(); 
    var dataString = 'columnB='+ dataB; 
    $.ajax ( { 
        type: "POST", 
        url: "ajax_try.php", 
        data: dataString, 
        cache: false, 
        success: function(html) 
        { 
         alert("hi.. again"); 
         $(".columnC").html(html); 
        }  
       }    
      ); 

      } 
    );

}）;

<?php 
include('db.php'); 
if($_POST['columnA']) 
{ 
$columnA = $_POST['columnA']; 

$sql = mysql_query("SELECT id, columnB FROM try WHERE columnA = '$columnA' GROUP BY columnB"); 

//$sql = mysql_query("SELECT id, columnB FROM try columnB WHERE columnA = '$columnA'"); 

while($row = mysql_fetch_array($sql)) 
{ 
$id = $row['id']; 
$columnB = $row['columnB']; 
echo '<option value="'.$id.'">'.$columnB.'</option>'; 

} 
} 


if($_POST['columnB']) 
{ 
$columnB = $_POST['columnB']; 

$sql = mysql_query("SELECT id, columnC FROM try WHERE columnB = '$columnB' GROUP BY columnC"); 

while($row = mysql_fetch_array($sql)) 
{ 
$id = $row['id']; 
$columnC = $row['columnC']; 
echo '<option value="'.$id.'">'.$columnC.'</option>'; 

} 
} 

?>

好吧，我想HTML代码，使其更易于理解的问题..

<html xmlns="http://www.w3.org/1999/xhtml"> 
.... 
<script type="text/javascript" src="http://ajax.googleapis.com/ 
ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
..... 
here is the script 
... 
</script> 
</head> 
<body> 
<table width="100%" border="0" cellpadding="10"> 
    <tr> 
    <td width="15%"><span style="font-size:20px;">columnA</span></td> 
    <td><span > 
     <select size="1" id="columnA" title="" name="columnA" class="columnA" style="width:250px; height:40px; font-size:20px; padding: 5px;"> 
      <option value="0" selected="selected">Choose..</option> 
     <?php 
      include('db.php'); 
      $sql=mysql_query("SELECT columnA FROM try GROUP BY columnA"); 
      while($row = mysql_fetch_array($sql)) 
      { 
      //$id = $row['id']; 
      $dataA = $row['columnA']; 
      echo '<option value="'.$dataA.'">'.$dataA.'</option>'; 
      } 
     ?> 
     </select> 
     </span> 
    </td> 
    </tr> 
    <tr> 
    <td width="15%"><span style="font-size:20px;">columnB</span></td> 
    <td> 
     <select size="1" id="columnB" title="" name="columnB" class="columnB" style="width:250px; height:40px; font-size:20px; padding: 5px;"> 
      <option value="0" selected="selected">Choose..</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td width="15%"><span style="font-size:20px;">columnC</span></td> 
    <td> 
     <select size="1" id="columnC" title="" name="columnC" class="columnC" style="width:250px; height:40px; font-size:20px; padding: 5px;"> 
      <option value="0" selected="selected">Choose..</option> 
     </select> 
    </td> 
    </tr> 


</table> 
</body> 
</html>

来源

2012-04-18 pikk

你能更清楚地解释您遇到什么问题？ – 2012-04-18 12:02:00

你可以发布你的HTML吗？ – SativaNL 2012-04-18 12:02:05

制作一个简化的测试案例http://css-tricks.com/reduced-test-cases/这是自行解决它的最简单方法。 – Sparky 2012-04-18 12:02:32

我会试图在一个查询中选择表中的所有行，然后使用JavaScript（或jQuery）更改选择列表选项。这节省了HTTP请求，因为每次更改引发AJAX事件，并且如果用户将选项更改为100次，那么仅仅出于审美原因就有100次请求。

的另一个好处是，如果由于某种原因，用户没有JavaScript，或者是一个缓慢的连接，然后选择列表中仍然可用，否则，因为他们没有被加载，他们会是空白的AJAX呼叫。

来源

2012-04-18 12:12:05

嗯，我认为我的表格有大约1000-2000条记录，对我来说它仍然是一个有用的选项吗？ – pikk 2012-04-19 07:03:41

我不明白为什么数字会影响它。一个数据库查询和一个HTTP请求比多个数据库调用和多个HTTP请求更可取。此外，您可以随时缓存您的数据库查询以备将来使用。 – 2012-04-20 08:31:53

好的。我会根据你的建议重新组织我的代码。感谢帮助。 – pikk 2012-04-20 08:46:30

while($row = mysql_fetch_array($sql)) { 
    $id = $row['id']; 
    $columnC = $row['columnC']; 
    echo '<option value="'.$id.'">'.$columnC.'</option>'; 
}

你打印columnB，而应打印columnC

来源

2012-04-18 12:08:00 SativaNL

你说得对。我现在修好了，但我还没有结果。 – pikk 2012-04-18 12:21:11

让我改变B柱之后Ajax请求的输出，并删除'回声“deneme ..”;'因为我觉得你现在浏览器打破了HTML。 – SativaNL 2012-04-18 12:45:15

我想我发现了这个问题。我改变了'echo'这一行';'用这个**回声''; ** – pikk 2012-04-18 13:47:21

我们如何使用数据库动态更改一些下拉列表？

回答

相关问题