Question

虽然为选择元素赋值似乎微不足道，但我无法理解为什么下面的代码将值设置为null而不是“form-type”和“genre”的正确值。所有其他字段都已正确设置。

请注意，这些选项是从数据库调用中动态添加的。

如果您倾向于对此问题进行投票，请提供理由，以便我可以从错误中吸取教训。

getSuccess函数是来自ajax例程的回调。

function getSuccess(data) {
    data = {};
    data.action = 'get-writer-data';
    data.userid = sessionStorage.getItem("user-id");
    console.log("user-id-manage-uloads=" + sessionStorage.getItem("user-id"))
    ajax('post', 'php/manage-uploads.php', data, getSuccess, "Error retrieving writer's data: ");
    $(".tr-clone");
    function getSuccess(data) {
        console.log("data=" + data);
        var trClone = $(".tr-clone");
        var jsonData = $.parseJSON(data);
        var count = 0;
        for (var key in jsonData) count++
        $.each(jsonData, function (key, value) {
            trClone.find(".title").val(value.Title);
            trClone.find(".work-type").val(value.WorkType);
            trClone.find(".form-type").val(value.FormType);
            trClone.find(".genre").val(value.Genre);
            console.log("value.FormType=" + value.FormType + ", form-type.val()=" +  trClone.find(".form-type").val());
            console.log("value.Genre=" + value.Genre + ", genre.val()=" +  trClone.find(".genre").val());
            trClone.find(".form-type").val(value.FormType);
            trClone.find(".nbr-pages").val(value.NumberOfPages);
            trClone.find(".synopsis a[href='" + value.Filename + "']");
            if (key === count - 1) return false;
            trClone = trClone.clone().insertAfter($(".tr-clone:last"));
        });
    }

})

的console.log

data = [{“Title”：“莫扎特，神童”，“0”：“莫扎特，   神童”， “WorkType”： “1”， “1”： “1”， “FormType”： “4”， “2”： “4”， “流派”： “12”， “3”： “12” “NumberOfPages”： “250”， “4”： “250”， “文件名”： “6532744220.pdf”， “5”： “6532744220.pdf”， “OriginalFilename”： “MozartWunderkindQueryLetter.pd”， “6” ： “MozartWunderkindQueryLetter.pd”}，{ “标题”：“莫扎特，   Wunderkind Query-Letter“，”0“：”莫扎特，神童   查询信 “ ”WorkType“： ”2“， ”1“： ”2“， ”FormType“： ”7“， ”2“： ”7“， ”流派“： ”9“， ”3“：” 9" ， “NumberOfPages”： “129”， “4”： “129”， “文件名”： “9981287843.pdf”， “5”： “9981287843.pdf”， “OriginalFilename”： “MozartWunderkindQueryLetter.pd”，” 6 “：” MozartWunderkindQueryLetter.pd“}]

value.FormType = 4，form-type.val（）= null   value.Genre = 12，genre.val（）= null value.FormType = 7，   form-type.val（）= null value.Genre = 9，genre.val（）= null

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Writer's Tryst - Manage Uploads</title>
        <style>
            table { 
                border-spacing:0;
                border-collapse:collapse;
            }
            td, th {
                padding: 5px;
            }
            .nbr-pages {
                width:  48px;
                text-align: right;
                padding-right: 2px;
            }
        </style>
    </head>
    <body>
        <h1>Manage Uploads</h1>
        <table id="table-writer-uploads">
            <tr>
                <th>TItle</th><th>Type</th><th>Form</th><th>Genre</th><th>Length</th><th>PDF</th><th>Delete</th>                
            </tr>
            <tr class="tr-clone">
                <td><input id="title" class="title" name="title" placeholder="Title" required autofocus="true" /></td>
                <td>
                    <select class="work-type" name="work-type">
                        <option value="1">Fiction</option>
                        <option value="2">Non-Fiction</option>       
                    </select>
                </td>
                <td>
                    <select class="form-type" name="form-type">
                    </select>
                </td>
                <td>
                    <select class="genre" name="genre">
                    </select>            
                </td>
                <td><input class="nbr-pages" name="nbrPages" required placeholder="Pages" /></td>
                <td><a href="" class="synopsis" target="_blank">Synopsis/Query Letter</a></td>
                <td><img src="img/icons/delete.png" alt="delete" /></td>
            </tr>
        </table>
        <script src="js/common.js"></script>
        <script src="js/manage-uploads.js"></script>
    </body>
</html>

Answer 1

原因是这些<select>元素中没有<option>个元素。设置<select>的值实际上意味着选择具有该值的<option>。但由于您没有选择设置的值，因此它没有任何效果，因此元素的值保持为null。

当您为这些下拉列表添加选项时，只要选项值与JSON中的值匹配，您的代码就可以正常工作。请注意，确实适用于.work-type，因为它有选项。

Answer 2

虽然为选择元素赋值似乎微不足道，但我无法理解为什么下面的代码将值设置为null而不是“form-type”和“genre”的正确值。所有其他字段都已正确设置。

您正在处理“form-type”和“genre”的空<select>元素。这些元素没有可以选择的<option>元素，因此它们的值仍然是空字符串（不是null）。

如果该选项尚不存在，您可以尝试添加该选项：

function selectOrCreate(list, value) {
  list.value = value;
  if (list.value === value) {
    return;
  }

  var option = document.createElement('option');
  option.textContent = value;
  option.value = value;
  list.appendChild(option);
  list.value = value;
}

var newValue = 'something';
var list = document.querySelector('select.form-type');
selectOrCreate(list, newValue);

Answer 3

每个方法循环一个数组。它不会将键和值传递给回调函数，而是将对象的索引传递给函数。因此，您应该通过解析数组索引来获取函数第一行中的对象。然后分配值。

function getSuccess(data) {
    console.log("data=" + data);
    var trClone = $(".tr-clone");
    var jsonData = $.parseJSON(data);
    var count = 0;
    for (var key in jsonData) count++
    $.each(jsonData, function (index) {

        value = jsonData[index];

        trClone.find(".title").val(value.Title);
        trClone.find(".work-type").val(value.WorkType);
        trClone.find(".form-type").val(value.FormType);
        trClone.find(".genre").val(value.Genre);
        console.log("value.FormType=" + value.FormType + ", form-type.val()=" +  trClone.find(".form-type").val());
        console.log("value.Genre=" + value.Genre + ", genre.val()=" +  trClone.find(".genre").val());
        trClone.find(".form-type").val(value.FormType);
        trClone.find(".nbr-pages").val(value.NumberOfPages);
        trClone.find(".synopsis a[href='" + value.Filename + "']");
        if (index === count - 1) return false;
        trClone = trClone.clone().insertAfter($(".tr-clone:last"));
    });

为什么没有设置select元素的值？

3 个答案: