Question

忽略上一个问题 - 这是我现在唯一不懂的，其他一切都有效：

更新：几乎正常工作：

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

Answer 1

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

以下是在后台使用PHP生成文本的类似情况......但是您可以修改它以便它只根据选择调用适当的文件（或者，如果您愿意，可以创建一个PHP文件根据一些GET变量回显正确的文本[如果你愿意，可以发布POST]）

Populating dropdown - PHP Ajax MySQL

您还可以将数据的目的地从下拉列表更改为textarea。所以这里有一些代码......它使用假设的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);
}
?>

Answer 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
 }
}

在下拉选择中更改textarea的值

2 个答案: