загрузка текста в текстовую область на основе выпадающего выбора

Для начала я поискал на сайте и нашел это:

Как заполнить текстовое поле с раскрывающимся списком выбор

но это не соответствовало моим потребностям, так как я создаю очень длинные шаблоны, а описанный выше метод был бы слишком трудоемким и непрактичным, поскольку это означало бы заполнение атрибута value каждого тега <option> моими шаблонами.

Итак, вот код:

<script type="text/javascript">
//<![CDATA[ 
function showCSTemplates(sel){   

locations =[ "", /*this remains blank for first selection in drop-down list*/ 

/*option 1*/                 
" This is template 1 that  will appear in a
textarea keeping 
its formatting 
as  
is. ",

/*option 2*/                
" This is template 2 that 
 will appear in a
 textarea keeping its 
 formatting as  is.

Credentials:  
Contact Info: ",

/*option 3*/                 
" This is template 3 that  will appear in a
textarea keeping its formatting as  is.

Donec tortor lorem,  
ornare vitae commodo nec,  
sagittis et nunc. 
Maecenas sagittis quam ",

/*option 4*/                 
"etc",

/*option 5*/                 
"etc...", ];
                        srcLocation = locations    [sel.selectedIndex];         
                        if (srcLocation != undefined && srcLocation != "") {      
                  document.getElementById('CSTemplates').innerHTML = srcLocation;   
 } 
}  //]]>
</script>

и вот разметка:

<h1>Note Generator</h1>

<div class="left">
CSTemplates
<p>
<select class="c10"> 
<option selected="selected" value="" id="Templates" onchange="showCSTemplates(this);">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.
</textarea>
</p>
</div><!--left ends here-->

Хуже всего то, что я даже не получаю ошибку сценария, когда тестирую это, он просто вообще не работает, поэтому я не знаю, где я ошибся. Я сделал аналогичную страницу, используя теги <input type="text">, и они работали нормально, но я не могу заставить его работать с тегами <textarea>, как бы я ни пытался.

Любая помощь будет очень признательна! Заранее спасибо!

Отредактировано 2 сентября 2011 г., 13:17:34

Чтобы пояснить сказанное выше, где я сказал "Я даже не получаю ошибку скрипта, когда тестирую это, он просто вообще не работает"

я имею в виду, что если я оставлю все шаблоны в одной строке, т.е.

/*option 1*/                 
" This is template 1 that  will appear in a textarea keeping its formatting as is. ",

тогда я не получаю ошибку. Однако если я введу разрывы строк для форматирования, как указано выше:

/*option 1*/                 
" This is template 1 that  will appear in a
textarea keeping 
its formatting 
as  
is. ",

то я получаю сообщение об ошибке "Незавершенная строковая константа". Решит ли эту ошибку использование \n? Кроме того, я исключил это из сценария, потому что не знаю, как это сделать, но в <textarea>, где написано

Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.

Мне нужно стереть, когда пользователь выбирает выбор из раскрывающегося списка, и чтобы <textarea> заполнялся соответствующим выбором из сценария. Спасибо!


person cassidymack    schedule 02.09.2011    source источник


Ответы (3)


Хорошо, у вас было много проблем в коде, основная из которых заключалась в указании onchange в опции вместо выбора, также была небольшая проблема, которую я решил, и вот рабочий пример http://jsfiddle.net/gKsdK/1/

Вот разметка

<h1>Note Generator</h1>

<div class="left">
CSTemplates
<p>
<select class="c10" onchange="showCSTemplates(this);"> 
<option selected="selected" value="" id="Templates">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.
</textarea>
</p>
</div><!--left ends here-->

Вот JS

function showCSTemplates(sel){   

locations =[ "", /*this remains blank for first selection in drop-down list*/ 

/*option 1*/                 
" This is template 1 that  will appear in a textarea keeping its formatting as  is. ",

/*option 2*/                
" This is template 2 that  will appear in a textarea keeping its  formatting as  is. Credentials:  Contact Info: ",

/*option 3*/                 
" This is template 3 that  will appear in a textarea keeping its formatting as  is. Donec tortor lorem,  ornare vitae commodo nec,  sagittis et nunc. Maecenas sagittis quam ",

/*option 4*/                 
"etc",

/*option 5*/                 
"etc...", ];
                   srcLocation = locations    [sel.selectedIndex];        
   if (srcLocation != undefined && srcLocation != "") {      
                  document.getElementById('CSTemplates').innerHTML= srcLocation;   
 } 
}
person Muhammad Usman    schedule 02.09.2011
comment
большое спасибо! меня ужасно смущают простые ошибки, я новичок в javascript. Однако я все еще не могу заставить работать разрывы строк, даже после использования предложения КорХосика. - person cassidymack; 02.09.2011
comment
поцарапать это, забыл изменить innerhtml на value. разрывы строк теперь работают, спасибо! знак равно - person cassidymack; 02.09.2011
comment
Рад слышать это :), не смущайтесь, не стесняйтесь спрашивать здесь, если у вас есть какие-либо проблемы. - person Muhammad Usman; 02.09.2011

Вы привязали событие onchange к option вместо select.

person Satish    schedule 02.09.2011
comment
В этом есть несколько проблем, но эта - убийца. Другие проблемы, новые строки в строках должны быть экранированы. Переменные должны быть объявлены с var. Вот работающий jsFiddle: jsfiddle.net/mHZgj/1 - person numbers1311407; 02.09.2011

Если вы хотите, чтобы строка состояла из нескольких строк, вы должны соединить ее:

/*option 1*/                 
" This is template 1 that  will appear in a \n"+
"textarea keeping \n"+
"its formatting \n"+
"as \n"+  
"is. \n",

\n здесь только для создания структурных линий в вашем файле .

И если вы хотите изменить содержимое текстового поля, используйте свойство .value, а не .innerHTML!

person KorHosik    schedule 02.09.2011
comment
Вы также можете экранировать символы новой строки с помощью обратной косой черты. - person numbers1311407; 02.09.2011