我试图使用jquery来设置某些标签的值。这是一个wordpress小部件的管理员端，它将存储一个记录列表，按照使用<select>检索的日期键入。为了实现这一点，我必须在data-*属性中使用一些janky值存储来链接三个隐藏<select>列表的内容。
我们的想法是通过抓取可见的<select>选定的<option> data-date属性值来检索隐藏列表的值，抓住具有匹配<option>的每个隐藏<select>中的data-date。然后将这些值放入<input>字段中供用户编辑。
HTML片段
<label for="spdates">Special Dates:</label>
<p>
<select id="spdates">
<option data-date='new' value='new'>New Date</option>
<option data-date='23/05/1992' value='23/05/1992'> 23/05/1992-jake</option>
<option data-date='15/08/1997' value='15/08/1997'> 15/08/1997-rebecca</option>
<option data-date='17/03/1995' value='17/03/1995'> 17/03/1995-clive</option>
</select>
</p>
<p>
<label for="spname">Special Name:</label>
<input class="widefat namspani" id="spname" type="text" value="" />
</p>
<p>
<label for="sptext">Special Text:</label>
<input class="widefat namspani" id="sptext" type="text" value="" />
</p>
<p>
<label for="spdate">Special Date(dd/mm/yyyy):</label>
<input class="widefat namspani" id="spdate" type="date" value="" />
</p>
<p>
<label for="spimage">Special Image:</label>
<br />
<input type="text" class="img anisp" id="spimage" value="" />
<input type="button" class="select-imgsp" value="Select Image" />
</p>
<select id="eventNames" name='widget-dates_widget[__i__][eventNames][]' multiple hidden>
<option data-date='23/05/1992' value='[23/05/1992]jake' selected> jake</option>
<option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
<option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventText" name='widget-dates_widget[__i__][eventText][]' multiple hidden>
<option data-date='23/05/1992' value='[23/05/1992]yay me' selected> yay me</option>
<option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
<option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventImages" name='widget-dates_widget[__i__][eventImages][]' multiple hidden>
</select>
Jquery函数
$(function() {
//onchange for the date select to populate the other boxes
$(document).on('change', 'select#spdates', function(evt) {
var date = $(this).find(":selected").attr("data-date");
if (date == "new") {
//new date selected, discard what's in the boxes and blank values
$(".namspani").val("");
} else {
//different date selected, discard what's in the boxes and blank values
alert($("#eventNames").find("[data-date='" + date + "']").text());
$("#spname").val($("#eventNames").find("[data-date='" + date + "']").text()); //grab from other lists
$("#sptext").val($("#eventText").find("[data-date='" + date + "']").text());
$("#spdate").val(date);
$("#spimage").val($("#eventImagess").find("[data-date='" + date + "']").text());
}
});
})
我已经确认我的代码正在运行，因为我已经放了一个alert()，其中包含我试图在我希望运行的函数的分支中设置的值之一。实际上，警报文件具有正确的内容，但输入字段不会填充数据。
此代码适用于jsfiddle https://jsfiddle.net/ForceGaia/j363mv3w/1/，但不适用于firefox或chrome。
发生了什么事？我对jquery很新，所以我现在想知道我是否遗漏了一些基本的东西。
修改
警报触发，所以我知道它正在获取正确的代码块，因此某些版本的JQuery似乎正在运行。 console.log($().jquery);将1.12.4放入日志中。
我尝试将硬编码字符串放入.var()参数中，但仍然没有。
我将$("#spname")搜索移动到变量中以查看它是否找到了它。
var spnamedom = $("#spname");
在那段代码spnamedom之后是一个元素数组（知道jQuery，我预料到的）我尝试访问第0个元素，它是正确的元素。
所以我尝试了以下两个
var spnamedom = $("#spname");
spnamedom.val("a thing");
和
var spnamedom = $("#spname")[0];
spnamedom.val("a thing");
spnamedom始终是我所期待的，但都不起作用。在两种情况下都有一个具有正确id的元素，可以是第0个元素，也可以是变量中的直接元素。
后者将TypeError: spnamedom.val is not a function放入日志中。我假设错误是因为我不再在JQuery对象中，并且在我抓住第0个元素后正在查看DOM对象。我可以编辑这个原始DOM元素来获得我想要的东西，但最初的问题仍然存在，为什么我的代码在jsfiddle中工作，而不是实时浏览器;从我正在阅读的内容来看，这应该可行。
我还发现jQuery .val change doesn't change input value并使用`.attr（＆＃39;值＆＃39;，＆＃39;文字＆＃39;）也不起作用。
编辑2
我意识到在我的代码中我有一些东西可以在不同的控件上做我想要的东西，并且它有效 - 这更令人困惑。我完全忘记了代码在执行时执行相同的操作。
在我只提供了我的JQuery脚本之前，这里是整个事情
var image_field;
jQuery(function($) {
$(document).on('click', 'input.select-img1', function (evt) {
image_field = $(this).siblings('.img');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
$(document).on('click', 'input.select-img2', function (evt) {
image_field = $(this).siblings('.img');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
$(document).on('click', 'input.select-img3', function (evt) {
image_field = $(this).siblings('.img');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
$(document).on('click', 'input.select-imgsp', function (evt) {
image_field = $(this).siblings('.img');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function (html) {
imgurl = $('img', html).attr('src');
image_field.val(imgurl);
tb_remove();
}
// onchange for the date select to populate the other boxes
$(document).on('change', 'select#spdates', function (evt) {
console.log($().jquery);
var date = $(this).find(":selected").attr("data-date");
if (date=="new") {
//new date selected, discard what's in the boxes and blank values
$(".namspani").val("");
}
else {
//different date selected, discard what's in the boxes and blank values
alert($("#eventNames").find("[data-date='"+date+"']").text());
var spnamedom = $("#spname");
spnamedom.attr('value', 'new value'); //grab from other lists
$("#sptext").val($("#eventText").find("[data-date='"+date+"']").text());
$("#spdate").val(date);
$("#spimage").val($("#eventImagess").find("[data-date='"+date+"']").text());
}
});
});
我没有包含的代码是对看起来像这样的html位的行为
<p>
<label for="s3image">Image 3:</label><br />
<input type="text" class="img ani1" name="widget-namsoc_nextmeet_widget[__i__][s3image]" id="s3image" value="" />
<input type="button" class="select-img3" value="Select Image" />
</p>
它的作用是在单击按钮时打开Wordpress图像上载器对话框。当＆＃34;插入帖子＆＃34;按下它会将路径值设置到字段中。
此代码有效。那么使其失败的其他代码有什么不同呢？