基於從sql db動態加載的select選項值輸入文本值

Question

我有一個表單，它有一個select字段，可以從db結果查詢動態加載選項。這是代碼的樣子。事後查看說明文字輸入？我需要代碼返回在productID下選擇的項目的描述。我如何去做這件事？非常感謝所有答覆。

<div class="row-fluid"> 
    <div class="span3"> 
     <label>SKU</label> 
     <?php echo '<select name="ITEM" id="user" class="textfield1">'; 
     while($res= mysql_fetch_assoc($sql)) 
     { 
     echo '<option value="'.$res['productID'].'">'; 
     echo $res['SKU'] ; 
     echo'</option>'; 
     } 
     echo'</select>'; 

     ?> 
    </div> 
</div> 
<div class="row-fluid">    
    <div class="span3"> 
     <label>Description</label> 
     <input type="text" name="description" value=""/> 
    </div> 
</div> 

Answer 1

您可以通過兩種方式做到這一點：

第一種方式是通過重定向有$_GET參數，其中將包含產品ID頁：

<div class="row-fluid"> 
    <div class="span3"> 
     <label>SKU</label> 
     <?php echo '<select name="ITEM" id="user" class="textfield1" 
         onchange="document.location=\'my-page.php?pid=\' + this.value">'; 
     while($res= mysql_fetch_assoc($sql)) 
     { 
      echo '<option value="'.$res['productID'].'"'; 
      // LATER EDIT 
      if(isset($_GET['pid']) && $_GET['pid'] == $res['productID']) 
       echo 'selected="selected"'; 
      // END LATER EDIT 
      echo '>'; 
      echo $res['SKU'] ; 
      echo'</option>'; 
     } 
     echo'</select>'; 

     ?> 
    </div> 
</div> 
<div class="row-fluid">    
    <div class="span3"> 
     <label>Description</label> 
     <?php 
      if(isset($_GET['pid']) && is_numeric($_GET['pid'])) { 
       $sql = mysql_query("SELECT description 
            FROM products 
            WHERE product_id='" . mysql_real_escape_string($_GET['pid']) . "'"); 
       $row = mysql_fetch_assoc($sql); 
      } 
     ?> 
     <input type="text" name="description" value="<?=$row['description']?>"/> 
    </div> 
</div> 

方式二將動態地添加ajax調用和填充描述輸入，而不會刷新頁面

// this is the JS code 
$(document).ready(function(){ 
    $('#user').change(function(){ 
     $.POST("my-ajax-call-page.php", 
       {pid: $("#user").val()}, 
       function(data){ 
        $('input[name="description"]').val(data.description); 
       }, "json"); 
    }); 
}); 

和你my-ajax-call-page.php應該是這樣的：

<?php 
    include("mysql-connection.php"); 

    $sql = mysql_query("SELECT description 
         FROM products 
         WHERE product_id='" . mysql_real_escape_string($_POST['pid']) . "'"); 
    $row = mysql_fetch_assoc($sql); 

    echo json_encode("description" => $row['description']); 
?> 

你會發現許多實例和文檔的使用上jQuery library website

Answer 2

<div class="row-fluid"> 
    <div class="span3"> 
     <label>SKU</label> 
     <?php echo '<select name="ITEM" id="user" class="textfield1" onchange="showDesc()">'; 
     $desHTML = ""; 
     echo "<option value='0'>Please select</option>" 
     while($res= mysql_fetch_assoc($sql)) 
     { 
     echo '<option value="'.$res['productID'].'">'; 
     echo $res["SKU"] ; 
     echo'</option>'; 
     $desHTML .="<div class'descBox' id='".$res['productID']."' style='display:none'>".$res['description']."</div>"; 
     } 
     echo'</select>'; 

     ?> 
    </div> 
</div> 
<div class="row-fluid">    
    <div class="span3"> 
     <label>Description</label> 
     <?php echo $desHTML; ?> 
    </div> 
</div> 

jQuery庫現在創建一個js函數和對平變化的呼籲選擇框。 Js函數提示：

$（「.descBox」）。hide（）; $（「＃」+ selectedItemValue）.show（）;

讓我知道你是否需要JS功能的任何幫助。

Answer 3

您沒有向我們展示您的SQL查詢，但我假設您有一列名爲的描述並且您也在查詢中選擇了此列。

那麼，你可以使用jQuery插入所選項目說明輸入

<div class="row-fluid"> 
<div class="span3"> 
    <label>SKU</label> 
    <?php echo '<select name="ITEM" id="user" class="textfield1">'; 

    $js_array = array(); // This variable will contain your Javascript array with descriptions 
    while($res= mysql_fetch_assoc($sql)) 
    { 
    echo '<option value="'.$res['productID'].'">'; 
    echo $res['SKU'] ; 
    echo'</option>'; 

    // Fill your array with descriptions; ID of item will be the index of array 
    $js_array[$res['productID']] = $res['description']; 
    } 
    echo'</select>'; 
    ?> 
    <script> 
    var description; 
    <?php 
    foreach($js_array as $description => $id) 
    { 
     echo("description['".$id."'] = '".$description."';\n"); 
    } 
    ?> 

    $(document).ready(function(){ 
     $('#user').change(function(){ 
     $("#description").val(description[$('#user').val()]); 
     }) 
    }); 
    </script> 
</div> 
</div> 
<div class="row-fluid">    
    <div class="span3"> 
     <label>Description</label> 
     <input type="text" name="description" id="description" value=""/> 
    </div> 
</div> 

請務必不要忘記屬性添加id您input type="text"