Change value of textarea on dropdown select
Ignore the previous question - this is the only bit I don't understand now, everything else works:
UPDATE: ALMOST WORKING:
$(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);
});
});
QUESTION: How would I pass the index of the selected item in the dropdown into that php code (from the jquery), so that I could call the a开发者_JS百科ppropriate item in the array to return the right file.
You can use AJAX to read in the files. You'll add an 'onchange' function to the dropdown, so that each time the user changes it, the ajax function will fire (retrieving the file contents) and insert that text into the textarea.
Here is a similar situation that used PHP in the background to generate the text...but you can modify that so that it just calls the appropriate file based on the selection (or, if you prefer, make a single PHP file that echoes the right text based on some GET variable [or POST if you like])
Populating dropdown - PHP Ajax MySQL
you'd also change the destination of the data from the dropdown to your textarea. So here's some code...it uses the hypothetical getMyText.php (passing it the 'file' variable) and expects text back, which it will then place in the 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>
EDIT: Using jQuery
the 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>
the PHP web service:
<?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);
}
?>
You're looking for the 'change' event of the select. Because events can be very inconsistent between different browsers, you will most likely want a framework to help:
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]
}
You also need to place an AJAX request in that method, so you will have to create an XMLHttpRequest. Seriously, this is something which you REALLY should use a framework for. But here is a possible method:
// 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
}
}
加载中,请稍侯......
精彩评论