使用PHP數組數據創建和操作HTML表單

Question

我在編寫一段代碼時遇到了一些麻煩，並試圖按照我希望的方式工作。

我有這個數組這是從我的數據庫

Array ([0] => Array ([id] => 1 [title] => Test 1 [comment] => Test 1) [1] => Array ([id] => 2 [title] => Test 2 [comment] => This is the second test!!)) 

數據的每一行都有一個id，標題和評論。

我

<select name="Selection" id="Selection"> 
    <?php 
     echo "<option selected='selected' value='Default'>Please Make a Selection</option>"; 
     foreach($array as $row){ 
      echo "<option>" . htmlentities($row['title']) . "</option>"; 
     } 

    ?> 
</select> 

我想，這樣當用戶選擇一個標題，與該標題關聯的註釋進入下面的評論文本框以獲得它這個下拉菜單。

<p id="commentContainer"> 
<label for="comment">Comment</label> 
<textarea name='comment' id='comment' cols="40" rows="5"><? echo htmlentities($array["comment"]); ?></textarea> 
</p> 

而且我也有此Javascript

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#selection').change(function(){ 
     var commentId = $(this).val(); 
     $('#comment').val(commentId); 
    }) 
}); 

</script> 

這得到什麼下拉到註釋文本框中選擇的值。

我如何獲得與評論文本框中標題相關的評論？我需要將下拉選項的值設置爲ID嗎？這是我陷入困境的地方，我一直在尋找答案。

Answer 1

似乎JavaScript是這個解決方案必備的。看看你是否可以得到這樣的工作方式：

第1步：json_encode()你的數組數據，以便它可以在JavaScript中使用。假設它結束了看起來像這樣：

var selectionData = { 
    "1": { 
     "title": "Test 1", 
     "comment": "Comment 1" 
    }, 
    "2": { 
     "title": "Test 2", 
     "comment": "Comment 2" 
    } 
}; 

第2步：使用這個對象來填充選擇：

$.each(selectionData, function(id, data) { 
    $("<option/>").attr({ 
     "value": id 
    }).text(data.title).appendTo("#Selection"); 
}); 

第3步：使用這個對象來更新自己的評論框：

$("#Selection").change(function() { 
    var id = $(this).val(); 
    $('#comment').val(selectionData[id].comment); 
}); 

Demo here

Answer 2

你從來沒有對期權的價值：

echo "<option>" . htmlentities($row['title']) . "</option>"; 

應該

echo "<option value=\"{$row['id']}\">" . htmlentities($row['title']) . "</option>"; 

那麼你應該有一個id爲重點，並在JavaScript中值註釋數組：

//Generate this with PHP or an AJAX call 
var comments = new Array(); 
comments[1] = "Some comment for id 1"; //Where 1 is the value of the comment id 

艾克這樣的：

<script type="text/javascript"> 

$(document).ready(function() { 
    var comments = new Array(); 
    <?php foreach ($array as $row) {?> 
    echo "comments[" . $row['id'] . "] = \"" . $row['comment'] . "\";"; 
    <?php } ?> 
}); 

</script> 

Answer 3

您需要將值添加到選項標籤

echo "<option value='$title'>" . htmlentities($row['title']) . "</option>"; 

，並使用ID來代替標題，雖然。

Answer 4

這應該可以做到。迭代你的數組兩次以輸出所有的評論和所有的選擇框，然後全部隱藏它們。

<select name="selection" id="selection"> 
    <?php 
     echo "<option selected='selected' value='Default'>Please Make a Selection</option>"; 
     foreach($array as $row){ 
      echo "<option value=\"$row[id]\">" . htmlentities($row['title']) . "</option>"; 
     } 

    ?> 
</select> 

<?php 
    foreach($array as $row) { 
?> 
<p id="commentContainer_<?php echo $row['id']; ?>" class="comment-container"> 
<label for="comment">Comment</label> 
<textarea name="comment" id="comment" cols="40" rows="5"><? echo htmlspecialchars($array["comment"]); ?></textarea> 
</p> 
<?php 
    } 
?> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#selection').change(function(){ 
     var commentId = $(this).val(); 
     $('.comment-container').hide(); 
     $('#commentContainer_' + commentId).show(); 
    }) 
}); 

</script> 

Answer 5

第一步是向該選項添加一個值。這可以通過使用value屬性來完成。

echo("<option value='" . $uniqueIdentifierOfSelection. "'>"); 

從那裏，你需要採取這個值，並從數組中獲得良好的評論顯示。

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#selection').change(function(){ 
     var id = $(this).val(); 
     $('#comment').val(myArray[id]); 
    }) 
}); 

</script>