Question

我有一个用户用来将信息保存到文本文件的表单，然后是一个下拉列表，用于提取文件名称并将该信息显示回文本字段，但是我试图弄清楚我是怎么做的选择一个值时清除文本字段。我有一个＆lt;选项值=＆＃34; 0＆＃34; ＆gt;（添加新代码）除了我的php之外，它只是一个占位符，因此他们可以使用表单来保存数据。我想弄清楚的是如何在选择特定下拉列表时清除文本框。我还想添加一个删除按钮，只要从下拉列表中选择文件，就会出现该按钮。以下是我的相关编码。

感谢您对显示问题和css按钮的帮助我正在尝试找出删除按钮的php脚本以删除当前选择的文件。

<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();"><option value="0">(Add New Code)</option>
<?php
    $directory = $directory = 'users/' . $_SESSION['username'];
    $filesContents = Array();
    $files = scandir( $directory ) ;

     foreach( $files as $file )
    {
   if ( ! is_dir( $file ) )
  {
 $filesContents[$file] = file_get_contents($directory , $file);
echo "<option>" . $file . "</option>";
}
}
?>
</select>
        <h3>Saved Codes</h3>
        <form method="post" action="/evo/avsaveprocess.php">
            <input type="hidden" name="Action" value="SAVE" />
            <input type="hidden" name="CodeId" id="CodeId" value="0" />
            <table width="100%" border="0">
                <tr>
                    <td>Description:</td>
                    <td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></td>
                </tr>
                <tr>
                    <td valign="top">Code:</td>
                    <td>
                        <textarea rows="10" style="width:99%" name="Code" id="CodeValue"></textarea>
                    </td>
                </tr>
            </table>
            <input type="submit" value="Save" />
            </form>
<script>
    $(document).ready(function(){
      // apply a change event
       $('#CodeList').change(function() {
         // update input box with the currently selected value
         $('#CodeName').val($(this).val());
         $.get( '<? echo $directory ?>' + '/' + $('#CodeName').val(), function( data ) {
        $( "#CodeValue" ).text( data );
    });
  });
 });

Answer 1

< option value="0" >(Add New Code)< /option >

我不明白value="0"

的目的

选择<option>后，您会从.selectedIndex

中检索<select id="id">

然后，您使用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）;
转换后＆lt;到< preg_replace('/</','<',$contents);
已转换＆gt;到> preg_replace('/>/','>',$contents);');
然后，当将文本设置为内容数组的内容时，＆gt;，＆gt;并且必须将其转换回原来的字符 var temp = contents[ndx].replace(/</g,'<');
temp = temp.replace(/>/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
textarea需要调整大小以显示内容
添加滚动条
CSS：overflow:scroll;
设置为内容的高度
txt.style.height= txt.scrollHeight;
当内容非常大的textarea太大时有限的textarea高度适合浏览器窗口。
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
+'px'很重要当较小的文件跟随lage文件时，文本区域的高度必须减少 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('/</','&lt;',$contents);
      $contents = preg_replace('/>/','&gt;',$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(/&lt;/g,'<');
temp = temp.replace(/&gt;/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();

选择和删除按钮上的清除文本框出现在选择上

1 个答案: