Изменить значение текстовой области в выпадающем списке выберите - PullRequest
Новая
       4

Изменить значение текстовой области в выпадающем списке выберите

1 голос
/ 03 августа 2011

Игнорировать предыдущий вопрос - это единственный бит, который я сейчас не понимаю, все остальное работает:

ОБНОВЛЕНИЕ: ПОЧТИ РАБОТАЕТ : 

$(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), чтобы я мог вызвать соответствующий элемент в массиве для возврата нужного файла.

Ответы [ 2 ]

2 голосов
/ 03 августа 2011

Вы можете использовать AJAX для чтения в файлах. Вы добавите функцию «onchange» в выпадающий список, чтобы каждый раз, когда пользователь изменял ее, функция ajax запускалась (извлекала содержимое файла) и вставляла этот текст в текстовое поле.

Вот аналогичная ситуация, в которой PHP использовался в фоновом режиме для генерации текста ... но вы можете изменить его так, чтобы он просто вызывал соответствующий файл на основе выбора (или, если хотите, создавал один файл PHP). который отображает правильный текст, основанный на некоторой переменной GET [или POST, если хотите])

Заполнение раскрывающегося списка - PHP Ajax MySQL

вы также измените место назначения данных из раскрывающегося списка в текстовую область. Итак, вот некоторый код ... он использует гипотетический getMyText.php (передавая ему переменную 'file') и ожидает текст обратно, который затем помещает в текстовую область. 

<!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);
}
?>
0 голосов
/ 03 августа 2011

Вы ищете событие «изменить» выбора. Поскольку события могут быть очень несовместимыми между различными браузерами, вам, скорее всего, понадобится интегрированная среда: 

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