How to create a Javascript form that creates a paragraph based on dropdown choices?

Question

I want to create a form with multiple drop-down menus and depending on what you click in each dropdown menu, a piece of a paragraph is created.

For example:

Dropdown Menu 1 >> if you chose option 1 >> option one would have a specific couple of sentences associated with it and it would add it into a paragraph that is then displayed at the bottom of the form to be copied and pasted elsewhere

Dropdown Menu 2 >> chose option 2 >> option's associated sentences would be added after the sentences that were added from the first dropdown menu.

I hope this makes sense... I don't have any sample code to include because I am very new at making forms and not even really sure how to start one that would function like this.

Thanks!

Answer 1

Here's another solution, still using jQuery (if you want pure JS let me know, I started with that, but it seems "uncool" now :).

<select id="sel_1" name="select">
    <option class="first" value="value1">This is the first set of text</option>
    <option value="value2" selected>Second set of text, it will do nothing</option>
</select>
<select id="sel_2" name="select">
    <option value="value1">This is the first set of text in dropdown #2</option>
    <option value="value2" selected>Second set of text in dropdown#2, it will do nothing</option>
</select>
<textarea id="blockoftext"></textarea>

// Just setting these here...
var $first_dropdown = $('#sel_1');
var $second_dropdown = $('#sel_2');
var $textarea = $('#blockoftext');

// This is the first option in the first dropdown menu, the one that is 
// a prerequisite; there may be a better way to do this though...

var $first_option = $first_dropdown.find('option').first();

$first_dropdown.on('change', function () {
    if ($('option:selected', this).html() === $first_option.html()) {
        $textarea.text($('option:selected', this).html());
    }
});

$second_dropdown.on('change', function(){
    // If option one's text was added already
    if ($('#blockoftext').html() === $first_option.html()){
           $('#blockoftext').append($('option:selected', this).html())
    }
});

There are no doubt some additional ways you can compare/check to make sure the selectors exist. Check out the JS Fiddle here :)

http://jsfiddle.net/zu64ord3/2/

Answer 2

Here is one viable solution

 $('span').hide(); $('#selectone').on('change',function(){ var opt=$(this).val().toLowerCase(); $('.first').hide(); $('.first.'+opt).show(); }); $('#selecttwo').on('change',function(){ var opt=$(this).val().toLowerCase(); $('.second').hide(); $('.second.'+opt).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <select id='selectone'> <option></option> <option id='optionone'>One</option> <option id='optiontwo'>Two</option> <option id='optionthree'>Three</option> <option id='optionfour'>Four</option> </select> <select id='selecttwo'> <option></option> <option id='optionone'>One</option> <option id='optiontwo'>Two</option> <option id='optionthree'>Three</option> <option id='optionfour'>Four</option> </select> <div id='text'><span class='first one'>farkle </span><span class='first two'>barnacle </span><span class='first three'>farm </span><span class='first four'>git </span><span class='second one'>javascript </span><span class='second two'>fiddle </span><span class='second three'>lalalal </span><span class='second four'>conflict </span></div>