Hide several HTML elements and show them or append them to a separate section

Question

I am sorry for the long question in advance. However, I seriously appreciate anyone who is willing to help here...

I have a form where users select options and then click "Generate Text" and a note is generated for their situation. This one particular note that I'm working on is complex and has 7 different ways in which it could be written.

With that said. What I want to do is have the user select from a drop down list (yes, I know it's not the best choice, but I've been backed in a corner due to consistent user experience requirements). Based on the option that the user selects, I want a different selection of user inputs to show up inline (ideally) with the "base" note. Here is an idea of the base note:

<div class="note" id="504">
        <p class="item" id="p504">
          <input type="radio" checked>
          This is the beginning of the note
          <select id="partSelect">
            <option value=""></option>
            <option value="Option 1 ">Option 1</option>
            <option value="Option 2 ">Option 2</option>
            <option value="Option 3 ">Option 3</option>
            <option value="Option 4 ">Option 4</option>
            <option value="Option 5 ">Option 5</option>
            <option value="Option 6 ">Option 6</option>
            <option value="Option 7 ">Option 7</option>
          </select></p>

Notice that there are several spaces in the value. That's because the way the JS is written, it'll pick up the value of the select in the text of the note (I'm removing some proprietary information).

Previously, I've used a switch() statement based on the value of the drop down and then big blocks of code that will hide and show sections. Example:

    $("#part1").css("display","none");  
    $("#part2").css("display","inline");
    $("#part3").css("display","none");
    $("#part4").css("display","none");
    $("#part5").css("display","none");
    $("#part6").css("display","none");
    $("#part7").css("display","none");

I would like to not do that anymore. However, my attempts at doing things like:

    $(".part").css("display","none");
    $("#part1").css("display","inline");

have not worked.

Ideally, I would like to find the contents of a div and apply those contents to the end of the base note so that the user just experiences clicking through a dropdown box and the end of that note changes dependent on the option selected.

Does anyone have the ability to teach me something that I can do??

Answer 1

Use the value of each option to store the id of the element you want to show. Then, you can use $('#' + this.value) inside your change event handler to select the element to be shown. Also, lift your DOM query to $('.part') out of all event handlers so it is not run multiple times unnecessarily. You can use .show() and .hide() to control whether elements display, too, instead of .css() .

Edit: You may not need .show() and .hide() if you switch the nodes with the variable content between an inline visible area and a hidden block area. See updated example below:

 var parts = $('.part') var content = $('#selected-content') var templates = $('#hidden-area') $('#partSelect').change(function () { content.contents().appendTo(templates) $('#' + this.value, templates).appendTo(content) }) 

 #hidden-area { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="note" id="504"> <p class="item" id="p504"> <input type="radio" checked/> This is the beginning of the note <select id="partSelect"> <option value=""></option> <option value="part1">Option 1</option> <option value="part2">Option 2</option> <option value="part3">Option 3</option> <option value="part4">Option 4</option> <option value="part5">Option 5</option> <option value="part6">Option 6</option> <option value="part7">Option 7</option> </select> <span id="selected-content"></span> </p> <p id="hidden-area"> <span class="part" id="part1">Part 1</span> <span class="part" id="part2">Part 2</span> <span class="part" id="part3">Part 3</span> <span class="part" id="part4">Part 4</span> <span class="part" id="part5">Part 5</span> <span class="part" id="part6">Part 6</span> <span class="part" id="part7">Part 7</span> </p> </div>