Databases
StackOverflow2013
Postsdbo
PODetect multiple drop-down selections and paragraph content dynamically with jQuery and JavaScript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODetect multiple drop-down selections and paragraph content dynamically with jQuery and JavaScript
    text
    copied!<p>I've created a madlib style paragraph with multiple drop-down selections for synonyms of various words. Here's an example:</p> <pre><code>&lt;p id="the-text"&gt;This is an example paragraph containing many &lt;select class="selector"&gt; &lt;option&gt;selections&lt;/option&gt; &lt;option&gt;dropdown thingies&lt;/option&gt; &lt;option&gt;option choosers&lt;/option&gt; &lt;/select&gt;that I would like to be able to &lt;select class="selector"&gt; &lt;option&gt;click on&lt;/option&gt; &lt;option&gt;select&lt;/option&gt; &lt;option&gt;choose&lt;/option&gt; &lt;/select&gt;and then know what the &lt;select class="selector"&gt; &lt;option&gt;final&lt;/option&gt; &lt;option&gt;selected&lt;/option&gt; &lt;option&gt;variable&lt;/option&gt; &lt;/select&gt;paragraph text is. &lt;select class="selector"&gt; &lt;option&gt;It would be great&lt;/option&gt; &lt;option&gt;It would be nice&lt;/option&gt; &lt;option&gt;It'd be delightful&lt;/option&gt; &lt;/select&gt;, and &lt;select class="selector"&gt; &lt;option&gt;useful&lt;/option&gt; &lt;option&gt;helpful&lt;/option&gt; &lt;option&gt;interesting&lt;/option&gt; &lt;/select&gt;to dynamically create paragraphs like this.&lt;/p&gt; &lt;textarea id="text-area" rows="4" cols="110"&gt;This is where the text should appear... &lt;/textarea&gt; </code></pre> <p>Here is a live example: <a href="http://jsfiddle.net/T4guG/2/" rel="nofollow">http://jsfiddle.net/T4guG/2/</a></p> <p>Using jQuery and Javascript, I am trying to get the selected (and surrounding) text to appear in the text area.</p> <p>It's kind of working, but there are two problems:</p> <p>1) SOLVED: There was a problem with punctuation, but replacing:</p> <pre><code> if (element == "{") { content_array[i] = foo[j]; j++; } </code></pre> <p>with </p> <pre><code> if (element.indexOf('{') &gt;= 0) { content_array[i] = foo[j]; j++; } </code></pre> <p>allows { to be detected consistently</p> <p>2) SOLVED: you only can change the options once.</p> <p>Is there a more elegant solution than what I have come up with? Here is the code:</p> <pre><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 = "&lt;select class=\"selector\"&gt;&lt;/select&gt;", 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 &lt; 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(); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload