2013-10-07 71 views
-1

我有一個顯示mysql記錄的下拉選擇。我想要的是創建另一個下拉選擇有一個組合框。如何在php mysql中創建組合框?

bid.php

<script type="text/javascript" src="javascript/jquery.js"></script> 
<script> 
function showUser(str) { 
    var $txtHint = $('#txtHint'); 
    if (str == "") { 
     $txtHint.html(''); 
     return; 
    } 
    $txtHint.load('bid_list.php?q=' + str) 
} 
</script> 
</head> 
<body onload=showUser(str="ALL")> 

<div id="main" style="width:1150px;margin:0 auto;padding:10px;"> 
<div id="title" style="width:1150px;margin:0 auto;text-align:center;font-size:30px;color:gray;text-shadow:2px 2px #000;font-family:Verdana, Tahoma, sans-serif;"><h3>BIDDING LIST</h3></div> 
<div id="container" style="width:1100px;"> 
<?php 
$mysqli = new mysqli("localhost", "root", "", "app"); 
$result = $mysqli->query("SELECT bid FROM procurement WHERE bid LIKE '13-___' OR bid LIKE '1_-___' OR bid LIKE '2_-___' GROUP BY bid ORDER BY bid"); 

$option = ''; 
while($row = $result->fetch_assoc()) 
{ 
    $option .= '<option value = "'.$row['bid'].'">'.$row['bid'].'</option>'; 
} 
?> 

<div style="text-align:center;"> 
<select name="users" onchange="showUser(this.value)" style="overflow:scroll;width:100px;"> 
     <option value="ALL" selected='ALL'>ALL</option> 
     <?php echo $option; ?> 
</select> 
</div> 
<br> 

<div id="txtHint"></div> 

bid_list.php

<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" /> 
     <script type="text/javascript" src="javascript/jquery.tablesorter.js"></script> 
     <script type="text/javascript"> 
     $(function() { 
      $("table").tablesorter({debug: true}); 
     }); 
     </script> 
<script type="text/javascript"> 
    $(function(){ 
    var tfrow = document.getElementById('tfhover').rows.length; 
    var tbRow=[]; 
    for (var i=1;i<tfrow;i++) { 
     tbRow[i]=document.getElementById('tfhover').rows[i]; 
     tbRow[i].onmouseover = function(){ 
      this.style.backgroundColor = '#f3f8aa'; 
     }; 
     tbRow[i].onmouseout = function() { 
      this.style.backgroundColor = '#ffffff'; 
     }; 
    } 
    }); 
</script> 
</head> 
<body> 

<?php 
$mysqli = new mysqli("localhost", "root", "", "app"); 
$q = $_GET["q"]; 
$where = ''; 
if ($q != 'ALL') { 
    $where = " WHERE bid='$q' "; 
} 
$result1 = $mysqli->query(" 
    SELECT bid, item_name, item_description, unit, unit_cost, quantity, supplier, po_number, po_date, counter, SUM(unit_cost*quantity) AS total_amount 
    FROM procurement 
    $where 
    GROUP BY counter ORDER BY bid 
"); 
echo'<table id="tfhover" cellspacing="0" class="tablesorter" style="text-transform:uppercase;"> 
     <thead> 
     <tr> 
      <th title="Item Name">Item Name</th> 
      <th title="Item Description">Description</th> 
      <th title="Example : Pc, Pcs, Box and Etc.">Unit</th> 
      <th title="Item Price">Unit Cost</th> 
      <th title="Total Item Quantity">QTY</th> 
      <th title="Total Price">Total Amount</th> 
      <th title="Name of Supplier">Supplier</th> 
      <th title="Purchase Order #">PO #</th> 
      <th title="Purchase Order Date">PO Date</th> 
     </tr> 
     </thead>'; 
     echo'<tbody>'; 
while($row = $result1->fetch_assoc()){ 
if($row['bid'] != '') 
{ 
echo'<tr> 
      <td>'.$row['item_name'].'</td> 
      <td>'.$row['item_description'].'</td> 
      <td>'.$row['unit'].'</td> 
      <td>'.number_format($row['unit_cost'], 2, '.', ',').'</td> 
      <td>'.$row['quantity'].'</td> 
      <td>'.number_format($row['total_amount'], 2, '.', ',').'</td> 
      <td>'.$row['supplier'].'</td> 
      <td>'.$row['po_number'].'</td> 
      <td>'.$row['po_date'].'</td> 
     </tr></tbody>'; 
     } 
     } 
    echo "</table>"; 

if (!$mysqli) { 
    die('Connect Error: ' . mysqli_connect_error()); 
} 
mysqli_close($mysqli); 
    ?> 

</body> 
</html> 

我想要做,如果下拉值等於13-001第二個下拉顯示所有PO_NUMBER,如果我選擇第二下拉列表中顯示的所有po_number記錄如12-12-CO 397。怎麼做?

+0

你迫切需要學習將HTML與SQL分開。因爲mysqli與任何組合框完全無關,這使得你的問題無法回答。 –

回答

0

我只是想到了這一切,所以我希望它可以幫助你。

視圖

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="/js/dynamicSelect.js"></script> 
<script> 
$(document).ready(function() { 
    $("#selectToUpdate").dynamicSelect($("#changeTriggersUpdate"),"actionName.php"); 
}); 
</script> 

我做了一個jQuery插件dynamicSelect.js的 '$ .fn.x =' 把它添加到jQuery的

$.fn.dynamicSelect = function(trigger, action) { 
    var dynamicSelect = $(this); 
    trigger.on('change', function() { 
     if(trigger.val() > 0){ 
      $.getJSON(action, {searchVal: $(this).val()}, function(html) { 
       dynamicSelect.html(html); 
      }); 
     } else{ 
      dynamicSelect.html(''); 
     } 
    }); 
}; 

我寫我的服務器端代碼Yii框架,所以它不會對你有很大的好處,但它應該讓你知道需要做什麼。

public function actionVehicleSearch() 
{ 
      $searchVal = $_REQUEST['searchVal']; 
      $vehicles = Vehicle::model()->findAll(" 
         customerID LIKE ? 
         ", array('%' . $searchVal . '%')); 
      $str = ''; 
      foreach ($vehicles as $vehicle) { 
       $str .= '<option value="'. $vehicle->vID .'">'. $vehicle->VIN .'</option>'; 
      } 

      echo CJSON::encode($str); 
} 
+1

發送JSON,而不是HTML。 –

+0

請您詳細說明如何/爲什麼?謝謝! – Nick