使用PHP数组数据创建和操作HTML表单

Question

I am having a bit of trouble writing a piece of code and trying to get it to work the way I want it work.

I have this array which is off my database

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

each row of data has an id, title and comment.

I have this dropdown menu

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

I am trying to get it so that when the user selects a title, the comment associated with that title goes into the comment text box below.

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

And I also have this Javascript

<script type="text/javascript">

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

</script>

This gets the value of the what is selected in the dropdown to the comment textbox.

How would I get the comment assoicated with the title in the comment textbox? Would I have to set the value of the dropdown selections as the ids? This is where I am stuck and I have been googling my heart out for an answer.

Answer 1

Seems like JavaScript is a must-have for this solution. See if you can get this approach to work:

Step 1: json_encode() your array data so that it can be used inside JavaScript. Suppose it ends up looking something like this:

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

Step 2: Use this object to populate the select:

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

Step 3: Use this object to update the comment box:

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

Demo here