javascript - 在下拉选择中更改文本区域的值

标签 javascript ajax tinymce textarea drop-down-menu

忽略前面的问题 - 这是我现在唯一不明白的一点,其他一切都有效:

更新:几乎可以正常工作:

$(document).ready(function(){
 $("#fileSelect").click(function(){
     var myString = <?php
      $array = array('homeText.txt', 'anotherText.txt' /*ETC*/);
      $file = $array[/*JS SELECTED INDEX*/];
      $path = '../txt/'.$file;
      include $path;
      ?>
        tinyMCE.execCommand('mceReplaceContent',false,myString);
 });
});

问题:我如何将下拉列表中所选项目的索引传递到该 php 代码(来自 jquery),以便我可以调用数组中的适当项目以返回正确的文件。

最佳答案

您可以使用 AJAX 读取文件。 您将向下拉列表添加一个“onchange”函数,这样每次用户更改它时,ajax 函数都会触发(检索文件内容)并将该文本插入文本区域。

这是在后台使用 PHP 生成文本的类似情况...但是您可以对其进行修改,以便它仅根据选择调用适当的文件(或者,如果您愿意,可以创建一个 PHP 文件根据一些 GET 变量 [或 POST 如果你喜欢] 回显正确的文本

Populating dropdown - PHP Ajax MySQL

您还可以将数据的目的地从下拉列表更改为您的文本区域。所以这里有一些代码...它使用假设的 getMyText.php(将"file"变量传递给它)并期望返回文本,然后将其放置在文本区域中。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script>
function changeText(choice){
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            var res=xmlhttp.responseText;
            document.getElementById("myText").innerHTML=res;
            }
          }
        xmlhttp.open("GET","getMyText.php?file="+choice,true);
        xmlhttp.send();
        }
</script>

<select onChange="changeText(this.value)">
<option value="opt1">Option1</option>
<option value="opt2">Option2</option>
</select>
<textarea id="myText"></textarea>

</body>
</html>

编辑:使用 jQuery

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<script>
function changeText(choice){
$.get('so_getfile.php?file='+choice, function(data) {
  $('#myText').html(data);
});
        }
</script>

<select onChange="changeText(this.value)">
<option></option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
<textarea id="myText"></textarea>

</body>
</html>

PHP 网络服务:

<?php
$array = array('file1.txt', 'file2.txt');
$file = $array[$_GET['file']-1];
$text = fopen($file,'r');
if ($text) {
    while (($buffer = fgets($text, 4096)) !== false) {
        echo $buffer;
    }
    if (!feof($text)) {
        echo "Error: unexpected fgets() fail\n";
    }
    fclose($text);
}
?>

关于javascript - 在下拉选择中更改文本区域的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6918191/

相关文章:

javascript - 异步函数调用是否可以在两个同步语句之间完成?

javascript - ko observablearray : Difference between push and assigning directly

javascript - 如何继承Polymer中的变量?

java - ICEfaces:如何禁用某些表单的发送接收更新机制

reactjs - TinyMCE 表无法在 Material-ui Modal 上正确工作/加载

javascript - 删除 TinyMCE 文本

javascript - HTML5 App反盗版技巧?

javascript - 如何避免无限滚动中的多个 JavaScript 函数调用

javascript - 在 express 中将新的 select2 选项标签写入本地数据库

javascript - 将图像插入 tinymce 编辑器