使用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>