Jquery 从下拉列表中填充文本区域

Question

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

使用 jQuery 我现在可以使用基于 selection 的文件名填充第一个 textfield，但不知道如何在第二个文本中显示文件内容面积

jQuery 根据 selection:

填充第一个 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>

Answer 1

你试过了吗？ $.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>

我不知道它是否有效，请告诉我行为，如果有问题，我们会尽力解决。

Answer 2

这个需要做文件操作，不能直接写$('#CodeName').val($(this).val());

有 HTML5 API 感兴趣。

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

我想您也可以仅使用 IE ActiveX控件在 windows 上进行文件操作，前提是它与您相关。

Source

Jquery 从下拉列表中填充文本区域

Jquery populate textarea from dropdown list

html

php

file-io

jquery