Jquery从下拉列表中填充文本区域 - Jquery populate textarea from dropdown list

Jquery populate textarea from dropdown list

我创建了一个表单，用户可以在其中提交数据，这些数据作为.txt文件保存在用户文件夹中。然后，同一页面上有一个dropdown，显示他们以后可以选择的文件名。我正在尝试用文件名填充两个字段，并在另一个字段中填充文件内容。

使用

jQuery，我现在可以根据选择使用文件名填充第一个textfield，但无法弄清楚如何在第二个文本区域中显示文件内容。

jQuery 代码以根据选择填充第一个textbox：

<script>
  $(document).ready(function(){
    // apply a change event
    $('#CodeList').change(function() {
      // update input box with the currently selected value
        $('#CodeName').val($(this).val());
  });
 });
</script>

运行表单的 PHP 和 HTML ：

<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"><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>

你试过吗？ $.get( "DIRECTORY/FILE.EXT" );

<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 );
        });
  });
 });
</script>

我不知道它是否有效，请让我知道行为，如果有问题，我们会尝试修复。

您需要为此执行文件操作，并且不能直接写入$('#CodeName').val($(this).val());

有一个感兴趣的HTML5 API。

文件

API 允许您读取文件（由用户选择）。大多数现代浏览器都实现了这一点。

我认为您也可以仅使用IE的ActiveXcontrols在Windows上进行文件操作，前提是它与您相关。

源