[英]Detect multiple drop-down selections and paragraph content dynamically with jQuery and JavaScript
I've created a madlib style paragraph with multiple drop-down selections for synonyms of various words. 我创建了一个madlib样式的段落,其中包含多个下拉菜单,用于选择各个单词的同义词。 Here's an example: 这是一个例子:
<p id="the-text">This is an example paragraph containing many
<select class="selector">
<option>selections</option>
<option>dropdown thingies</option>
<option>option choosers</option>
</select>that I would like to be able to
<select class="selector">
<option>click on</option>
<option>select</option>
<option>choose</option>
</select>and then know what the
<select class="selector">
<option>final</option>
<option>selected</option>
<option>variable</option>
</select>paragraph text is.
<select class="selector">
<option>It would be great</option>
<option>It would be nice</option>
<option>It'd be delightful</option>
</select>, and
<select class="selector">
<option>useful</option>
<option>helpful</option>
<option>interesting</option>
</select>to dynamically create paragraphs like this.</p>
<textarea id="text-area" rows="4" cols="110">This is where the text should appear...
</textarea>
Here is a live example: http://jsfiddle.net/T4guG/2/ 这是一个实时示例: http : //jsfiddle.net/T4guG/2/
Using jQuery and Javascript, I am trying to get the selected (and surrounding) text to appear in the text area. 我正在尝试使用jQuery和Javascript将选定的(和周围的)文本显示在文本区域中。
It's kind of working, but there are two problems: 这是可行的,但是有两个问题:
1) SOLVED: There was a problem with punctuation, but replacing: 1)解决:标点符号存在问题,但替换为:
if (element == "{") {
content_array[i] = foo[j];
j++;
}
with 同
if (element.indexOf('{') >= 0) {
content_array[i] = foo[j];
j++;
}
allows { to be detected consistently 允许{被一致地检测到
2) SOLVED: you only can change the options once. 2)已解决:您只能更改一次选项。
Is there a more elegant solution than what I have come up with? 是否有比我想出的方案更优雅的解决方案? Here is the code: 这是代码:
function updateTextArea() {
//get all of the text selections, and put them in an array
var foo = [];
$('.selector :selected').each(function (i, selected) {
foo[i] = $(selected).text();
});
//get the paragraph content, and store it
var safe_content = $('#the-text').html();
//delete all the options
$('.selector').text('');
//get the text without the dropdown options
var content = $('#the-text').html();
//create a regex expression to detect the remaining drop-down code
var pattern = "<select class=\"selector\"></select>",
re = new RegExp(pattern, "g");
//replace all the drop-down selections with {
content = content.replace(re, "{");
//turn the content into an array
content_array = content.split(" ");
//go through the array, and if a element is {, go to "foo" and replace it with the selected option
var length = content_array.length,
element = null;
var j = 0;
for (var i = 0; i < length; i++) {
element = content_array[i];
if (element == "{") {
content_array[i] = foo[j];
j++;
}
}
//turn the array back into a paragraph
new_content = content_array.join(" ");
//replace the text with the origionanl text
$('#the-text').html(safe_content);
//put the new content into the text area
$('#text-area').val(new_content);
}
$(document).ready(function () {
updateTextArea();
});
$(".selector").change(function () {
updateTextArea();
});
You are splitting text based on " " (using space)
and replacing element {
with array
value but text is. {, and
您正在基于" " (using space)
分割文本" " (using space)
,并将元素{
替换为array
值,但text is. {, and
text is. {, and
contains comma ie, {,
is not equal to {
. text is. {, and
包含逗号,即{,
不等于{
。 Add space after element {
. 在元素{
之后添加空格。 This solves your first problem. 这解决了您的第一个问题。
As you are removing and adding select
options dynamically in function updateTextArea()
. 当您在函数updateTextArea()
动态删除和添加select
选项时。 You have to use .on()
to attach event handler for dynamically created elements. 您必须使用.on()
为动态创建的元素附加事件处理程序。
Try: 尝试:
$( document ).on("change",".selector",function() {
updateTextArea();
});
Instead of 代替
$(".selector").change(function () {
updateTextArea();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.