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

发布于 2024-11-28 02:16:52 字数 534 浏览 0 评论 0原文

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

更新：几乎可以工作：

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

原文

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 appropriate item in the array to return the right file.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骷髅 2024-12-05 02:16:52

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

这里有一个类似的情况，在后台使用 PHP 来生成文本...但是您可以修改它，以便它只根据选择调用适当的文件（或者，如果您愿意，可以创建一个与基于某些 GET 变量的正确文本 [或 POST 如果你喜欢])

填充下拉列表 - PHP Ajax MySQL

您还可以更改数据的目的地从下拉菜单到您的文本区域。所以这里有一些代码......它使用假设的 getMyText.php （向其传递“文件”变量）并期望返回文本，然后将其放置在文本区域中。

<!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 Web 服务：

<?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 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);
}
?>

回复收藏 0 原文

漫漫岁月 2024-12-05 02:16:52

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

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

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

回复收藏 0 原文

~没有更多了~