为什么不设置选择元素的值？
[英]Why aren't the values of a select element being set?
问题描述
尽管为选择元素分配值似乎很琐碎，但我无法理解为什么下面的代码将值设置为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
数据= [{“标题”：“莫扎特，维德金”，“ 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“}，{” 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”， “文件名”： “9981287843.pdf”， “5”： “9981287843.pdf”， “OriginalFilename”： “MozartWunderkindQueryLetter.pd”， “6”： “MozartWunderkindQueryLetter.pd”}]
value.FormType = 4，form-type.val（）=空值.Genre = 12，genre.val（）=空值.FormType = 7，form-type.val（）=空值.Genre = 9，类型.VAL（）=空
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>
3 个解决方案
解决方案1
1 2016-05-27 21:33:09
原因是这些<select>元素中没有<option>元素。 设置<select>的值实际上意味着选择具有该值的<option> 。 但是由于您设置的值没有选项，所以它没有任何作用，因此元素的值保持为null 。
当您向这些下拉菜单添加选项时，只要选项值与JSON中的值匹配，您的代码就可以正常工作。 注意，它确实适用于.work-type ，因为它具有选项。
解决方案2
1 2016-05-27 21:37:10
尽管为选择元素分配值似乎很琐碎，但我无法理解为什么下面的代码将值设置为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);
解决方案3
0 2016-05-27 21:00:22
每个方法循环遍历一个数组。 它不会将键和值传递给回调函数，而是将对象的索引传递给该函数。 因此，您应该通过解析数组索引在函数的第一行中获取对象。 然后分配值。
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"));
});
将HTML从一个元素复制到另一个元素时，为什么未保留子选择和输入的选择/选中属性的值？
[英]Why aren't the values of selected/checked attributes of child select's and input's not retained when copying HTML from one element to another?
在表单元素上执行reset方法时，为什么不重置隐藏字段？
[英]Why aren't my hidden fields being reset when I execute the reset method on a form element?
为什么 select 没有以 react-hook-form 列出 reset() 上的加载值？
[英]Why aren't select lists loading values on reset() in react-hook-form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.