Использование данных массива 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!! ) ) 

каждая строка данных имеет идентификатор, заголовок и комментарий.

У меня есть это выпадающее меню

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

Получает значение того, что выбрано в раскрывающемся списке в текстовом поле комментария.

Как мне получить комментарий, связанный с заголовком в текстовом поле комментария? Должен ли я установить значение выпадающего списка в качестве идентификаторов? Вот где я застрял, и я выискивал свое сердце, чтобы найти ответ.

Answer 1

Это должно сработать. Выполните итерацию массива дважды, чтобы вывести все комментарии и все поля выбора, а затем скройте их все.

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

Похоже, 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);
});

Демо здесь

Answer 3

Вы никогда не устанавливаете значение в опциях:

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

должно быть

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

Тогда у вас должен быть массив с идентификатором в качестве ключа и комментарием в качестве значенияв 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

Lke это:

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

Первый шаг - добавить значение в опцию. Это можно сделать с помощью атрибута value.

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

Оттуда вам нужно взять это значение и получить из массива хорошие комментарии для отображения.

<script type="text/javascript">

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

</script>

Answer 5

Вам необходимо добавить значение в тег опции

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

и использовать идентификатор вместо заголовка.