在下拉选择中更改文本区域的值答案

【问题标题】：Change value of textarea on dropdown select在下拉选择中更改文本区域的值
【发布时间】：2011-10-18 14:13:02
【问题描述】：

忽略上一个问题 - 这是我现在唯一不明白的一点，其他一切都可以：

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

$(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），以便我可以调用数组中的适当项目以返回正确的文件。强>

【问题讨论】：

JavaScript 是沙盒化的，因此您无法从那里读取或写入文件。
我不想 - 我想在调用 js 事件时运行一些 php
@Shi：如果文件可以通过某些网络服务器访问，他可以。
嗯，是的。但这对于脚本来说是透明的。如果内容是通过 HTTP 获取的，它可以来自任何地方——数据库、文件、代理流或其他任何地方。因此，对 file 的强调有点烦人。
我不确定（给定已接受的答案）您是否仍有问题，所以我在我之前的代码下面添加了 jQuery 版本...您在上面的代码中的问题是 PHP 运行在 JS 之前...所以您需要将 PHP 取出并将其形成为 Web 服务...然后 JS 会将选择值发送到该服务，并且该服务将回显文件内容...然后您弹出到文本区域

标签： javascript ajax tinymce textarea drop-down-menu

【解决方案1】：

您可以使用 AJAX 读取文件。您将在下拉列表中添加一个“onchange”函数，这样每次用户更改它时，ajax 函数都会触发（检索文件内容）并将该文本插入到 textarea 中。

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

Populating dropdown - PHP Ajax MySQL

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

<!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 和 XML（虽然用词不当，任何响应都可以）...稍后我将在此处添加一些示例代码
对于 cwallenpoole 的框架 cmets，如果您使用 jQuery 之类的框架，则该函数会变成类似于 $.ajax(file)...的东西

【解决方案2】：

您正在寻找选择的“更改”事件。由于不同浏览器之间的事件可能非常不一致，因此您很可能需要一个框架来提供帮助：

var sel = document.getElementById("selectbox1");

// if older versions of IE
// use attachEvent instead: sel.attachEvent("onchange", changeHandler);
sel.addEventListener("change", changeHandler, false);

function changeHandler(e)
{
   // your selected item can be found this way
   console.log( sel.options[sel.selectedIndex] )
   // or this way (technically there can be multiple items selected, 
   // you need to use the 0 index to get the first one.)
   sel.getSelected()[0] 
}

您还需要在该方法中放置一个 AJAX 请求，因此您必须创建一个XMLHttpRequest。说真的，这是你真正应该使用框架的东西。但这里有一个可能的方法：

// if IE: var req = new ActiveXObject("Microsoft.XMLHTTP")
var req = new XMLHttpRequest();
// you are probably going to want to use GET to do this.
req.open("GET", "result_of_select.php?choice="+
               sel.options[sel.selectedIndex].value, true);
// if you want POST, then you'll have to create the request parameter string
// and pass it to send
req.send();
req.onreadystatechange = function() {
 if(this.readyState == 2) {
  document.getElementById("my-text-field").text = req.responseText
 }
}

【讨论】：