< option value="0" >(Add New Code)< /option >
我不明白value="0"的目的
选择<option>从<select id="id">
检索
.selectedIndex
然后您使用selectedIndex 访问带有.options[selectedIndex].text 的选定选项
我不会做jQuery，但你可以轻松翻译。
我假设您想清除或更改选项文本。
这是在选择选项中清除文本的代码：
将文本添加到空字符串以更改文本值。
var ndx = document.getElementById('id').selectedIndex;
document.getElementById('id').options[ndx].text='';
jQuery（不是我的）
（来自get index of selected option with jQuery）
$("#id option:selected").index()
（来自jQuery get specific option tag text）
$("#id[ndx]").text();
删除按钮 HTML：
<button type="button" id="b1" class="hide">Delete</button>
删除按钮 CSS：
.hide{display:none;}
删除按钮 JS
document.getElementById('b1').style.display='block';
成功了：
<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
document.getElementById('b1').style.display='block';
//]]>
</script></body></html>
这个切换删除按钮
<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button type="button" onclick="hideShow()">Show Hide Delete</button><br/> <br/>
<button type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
var toggle = new Array();
toggle['none'] = 'block';
toggle['block'] = 'none';
var del = document.getElementById('b1');
del.style.display='block';
function hideShow(){
del.style.display=toggle[del.style.display];
}
//]]>
</script></body></html>
我的页面版本：
我过滤了文件以仅包含扩展名为 .php 的文件以供我测试
if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
问题和解决方案：
文件内容无法存储在变量中。
将换行符转换为
preg_replace('/\n/','
',$contents);
将 < preg_replace('/</','<',$contents);
已转换 > 为 &gt; preg_replace('/>/','&gt;',$contents);');
然后在将文本设置为内容数组的内容时，必须将 >、> 和
转换回它们的原始字符。
var temp = contents[ndx].replace(/&lt;/g,'<');
temp = temp.replace(/&gt;/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
需要调整 textarea 的大小以显示内容
添加滚动条
CSS:overflow:scroll;
设置为内容高度
txt.style.height= txt.scrollHeight;
当内容非常大时 textarea 太大。
有限的文本区域高度以适合浏览器窗口。
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
+ 'px' 很重要
当小文件跟随大文件时，文本区域高度必须降低
txt.style.height = '100px';
第一个选项需要留空，否则第一个选项不容易被选中，因为不会有更改事件。
将第一个数组元素设为空白
\ncontents[0] = '';\n
设置 $ndx = 1 而不是零
file_get_contents 需要的文件目录，而不向选项添加目录
将逗号改为点
file_get_contents($directory , $file);
file_get_contents($directory . $file);
现在我对这个页面相当满意：
<?php ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=120');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Code</title>
<style type="text/css">
#CodeValue{width:50%;background:#eff; width:80%;font:400 1em "Courier New", Courier, monospace;overflow:scroll;}
.btn{width:50%;margin:0 0 .5em 0;border-radius: 3px 3px 3px 3px;font: 700 1.2em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #00f;color: #fff;padding: .1em;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
</style>
</head><body>
EOT;
ob_flush();
$ndx = 1;
$js = "var contents=new Array();\ncontents[0] = '';\n";
$directory = 'users/';
$files = scandir($directory) ;
$options = "<option></option>\n";
foreach( $files as $file ){
if ( !is_dir($file) ){
if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
$options .= "<option>$file</option>\n";
$contents = file_get_contents($directory . $file);
$contents = preg_replace('/</','<',$contents);
$contents = preg_replace('/>/','>',$contents);
$contents = preg_replace('/\n/','<br>',$contents);
$contents = addslashes( $contents);
$js .= "contents[$ndx] = \"$contents\"\n";
$ndx++;
}
}
}
echo <<<EOT
<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection" id="Selection" value="-1"><div>Below is the list of your saved codes. To edit your codes, select it from the list.</div>
<select size="1" name="CodeList" id="CodeList" onchange="CodeChange();">
$options
</select>
<h3>Saved Codes</h3>
<form method="post" action="/evo/avsaveprocess.php"><div>
<input type="hidden" name="Action" value="SAVE" />
<input type="hidden" name="CodeId" id="CodeId" value="0" />
<label>Description:</label>
<input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /><br/>
<textarea rows="10" name="Code" id="CodeValue" onload="resize()">
</textarea><br/>
<input class="btn" type="submit" value="Save" />
</div></form>
<script type="text/javascript">
//<![CDATA[
$js
sel = document.getElementById('CodeList');
txt = document.getElementById('CodeValue');
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
function CodeChange(){
txt.style.height = '100px';
var ndx = sel.selectedIndex;
var temp = contents[ndx].replace(/</g,'<');
temp = temp.replace(/>/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
}
//]]>
</script></body></html>
EOT;
ob_end_flush();