个人中心
gpt4 book ai didi

javascript - 为什么不设置选择元素的值？

转载 作者：行者123 更新时间：2023-11-30 16:02:37 25 4
gpt4 key购买 nike

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

请注意，选项是通过数据库调用动态添加的。

查看test-site.

如果您倾向于否决这个问题，请提供一个理由，以便我从错误中吸取教训。

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"));
        });
    }

})

控制台日志

data=[{"Title":"Mozart, Wunderkind","0":"Mozart, Wunderkind","WorkType":"1","1":"1","FormType":"4","2":"4","Genre":"12","3":"12","NumberOfPages":"250","4":"250","Filename":"6532744220.pdf","5":"6532744220.pdf","OriginalFilename":"MozartWunderkindQueryLetter.pd","6":"MozartWunderkindQueryLetter.pd"},{"Title":"Mozart, Wunderkind Query-Letter","0":"Mozart, Wunderkind Query-Letter","WorkType":"2","1":"2","FormType":"7","2":"7","Genre":"9","3":"9","NumberOfPages":"129","4":"129","Filename":"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>

最佳答案

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

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

关于javascript - 为什么不设置选择元素的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37491996/

25 4 0
文章推荐： javascript - 如何为 Flow 注释此函数
文章推荐： javascript - webpack不写盘吗？
文章推荐： javascript - 我的红色方 block 不会出现，因为 : "speedX and speedY aren' t defined"-console
文章推荐： javascript - foreach里面的返回值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com