在下拉选择中更改文本区域的值
Posted
技术标签:
【中文标题】在下拉选择中更改文本区域的值【英文标题】：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 会将选择值发送到该服务，并且该服务将回显文件内容...然后您弹出到文本区域 【参考方案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
【讨论】：
以上是关于在下拉选择中更改文本区域的值的主要内容，如果未能解决你的问题，请参考以下文章