我的下一个挑战涉及 jqtransform，可以在这里找到http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
我有一个下拉列表，其项目是使用该函数填充的buildSelect1()它位于<head>该页面的（特别感谢 Brian Glaz 在使用 JavaScript 根据 selectedIndex 为 标签编写标签 https://stackoverflow.com/questions/7294763/write-labels-for-option-tags-based-on-selectedindex-using-javascript/7295778#7295778)
The <select>盒子的样式使用流行的 jQuery jqTransform 插件。然而它似乎有一个错误。使用 jqTransform 时，似乎由它设置样式的元素（或者可能只是下拉列表）不能为空。
为了演示这一点，我有以下沙箱页面：（如果测试，您需要下载 jqTransform，并将文件“jqtransform.css”放在名为“css”的文件夹中，将文件“jquery.jqtransform.js”放在名为“jquery”的文件夹中，jquery 库已链接从https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Title Drop</title>
<link rel="stylesheet" href="css/jqtransform.css" type="text/css" media="all" />
<script type='text/javascript'>
//<![CDATA[
//hosts labels or "titles" of templates
function buildSelect1() {
var labels = ["Please select a template...",
"Head Option 1",
"Head Option 2",
"Head Option 3",
"Head Option 4",
"Head Option 5",
"Head Option 6",
"Head Option 7",
"Head Option 8",
"Head Option 9"
];
for(var i=0; i<labels.length; i++) {
var selectBox = document.getElementById('foo');
var newOption = document.createElement('option');
newOption.label = labels[i];
newOption.innerHTML = labels[i];
newOption.value = labels[i];
if(i==0) { newOption.setAttribute('selected','selected'); }
selectBox.appendChild(newOption);
}
}
showSelectedTemplate = function(elem) {
var selectedTemplate = elem.options[elem.options.selectedIndex].value;
alert(selectedTemplate);
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
window.onload=function()
{
buildSelect1();
}
//]]>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.jqtransform.js">
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('form.test').jqTransform({imgPath:'jqtransformplugin/img/'});
});
//]]>
</script>
</head>
<body>
<form class="test">
<p>
<select id="foo" class="c10"> <!--toggle class="test" to show the problem -->
<option>Please select a template...</option>
<option>body option 1</option>
</select>
</p>
If you disable jqtransform (simplest way is to remove class="test" from < form >) you'll see the dropdown list populates using both the option tags as well as the buildSelect1() function in the head of the page. But if jqtransform is enabled, the dropdown list will not populate using the buildSelect1() function, the only items that will appear will be the option tags
</form>
<form class="test">
<p>
<select id="foo" class="c10">
</select>
</p>
</form>
If you leave a jQtransform enabled < select > box empty (i.e. no < option > tags assigned) when you click on it you'll see the following error:
<br /><br /><br />
<i>
<pre>
Webpage error details
Timestamp: Sun, 4 Sep 2011 16:24:36 UTC
Message: 'offset().top' is null or not an object
Line: 298
Char: 7
Code: 0
URI: file:///H:/New%20OLH%20Project/Note%20Generator/jquery/jquery.jqtransform.js
</pre>
</i>
<br /><br />Hopefully if the bug can be fixed, the final result should look like this:
<p>
<form class="test">
<p>
<select id="foo" class="c10">
<option>Please select a template...</option>
<option>head option 1</option>
<option>head option 2</option>
<option>head option 3</option>
<option>head option 4</option>
<option>head option 5</option>
<option>head option 6</option>
<option>head option 7</option>
<option>head option 8</option>
<option>head option 9</option>
</select>
</p>
</form>
</p>
</body>
</html>
我在整个论坛上进行了搜索，因为 jqtransform 似乎存在一些“错误”，并且大多数已通过添加新功能或替换现有功能来解决，但到目前为止我还没有找到解决此问题的方法。
有什么线索吗？
首先十分感谢！
