Show specific div and hide others based on select tag in iframe AJAX/jQuery?
<p>Yes, I know there's a lot of good answers for this question, however, I can't seem to make/adapt the code to work in my situation. This is a big project I'm working on, to make digital worksheets. I'm trying to make certain panels visible depending on the value of a  tag, however all the code I've tried I can't adapt to work with my case as the question template (where it gets submitted is based on the ?q= number) is in a iframe to save time and file size. Would it be possible to do a button to update the visible panels, or do AJAX for it whilst being in a iframe? I don't have any experience in AJAX or jQuery, and yes I've tried to lean them but they in my opinion is too complicated. </p>

<p>I found this answer, but it doesn't work for some reason.</p>

<p>Tip: If your giving me completed code (thank you!) just know that Text, Paragraph, and Mathematical all lead to div type-1</p>

<pre><code>&lt;html&gt;  
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="../assets/f.css"&gt;
&lt;script src="../assets/fjquery.js"&gt;&lt;/script&gt;
&lt;script src="../assets/f.js"&gt;&lt;/script&gt;
&lt;script src="../assets/fm.js"&gt;&lt;/script&gt;
&lt;/head&gt; 

    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
    &lt;/script&gt;

    &lt;label&gt;Question
    &lt;input type="text" placeholder="e.i Who was the discoverer of evolution?" name="q-name" required&gt;
    &lt;/label&gt;
    &lt;div class="large-12 columns"&gt;
        &lt;label&gt;Question Type 
        &lt;span style="color: #bbb;"&gt; &lt;i&gt;Click 'Update Field' after selection.&lt;/i&gt;&lt;/span&gt;
        &lt;select id="qtype" name="qtype"&gt;
        &lt;option value="2"&gt;Multiple Choice&lt;/option&gt;
        &lt;option value="3"&gt;Radio choice&lt;/option&gt;
        &lt;option value="1"&gt;Text&lt;/option&gt;
        &lt;option value="1"&gt;Paragraph&lt;/option&gt;
        &lt;option value="4"&gt;Selection Dropdown&lt;/option&gt;
        &lt;option value="1"&gt;Mathmatical&lt;/option&gt;
        &lt;/select&gt;
        &lt;/label&gt;
        &lt;a onClick="updateQTp()"&gt;Update Field&lt;/a&gt; |
        &lt;a onClick="hide()"&gt;Hide All Fields&lt;/a&gt; 
        &lt;p id="tester"&gt;&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="large-12 columns"&gt;

    &lt;!--TEXT, PARAGRAPH, MATH--&gt;&lt;div id="type-1"&gt;

    &lt;div class="panel"&gt;
        &lt;label&gt;Answer Type (Text, Paragraph, Mathmatical)&lt;/label&gt;
        &lt;input id="radio1" type="radio" name="tpm" value="simple" checked&gt;&lt;label for="radio1"&gt;Has Simple Answer&lt;/label&gt;
        &lt;input id="radio2" type="radio" name="tpm" value="complex"&gt;&lt;label for="radio2"&gt;Has Complex Answer&lt;/label&gt;
        &lt;input id="radio3" type="radio" name="tpm" value="human"&gt;&lt;label for="radio3"&gt;Needs manual correction&lt;/label&gt;
        &lt;hr style="padding: 4; margin: 0;" /&gt;

    &lt;label&gt;Correct Answer (Simple Answer Only)
    &lt;input type="text" placeholder="e.i Charles Darwin" name="abox"&gt;
    &lt;/label&gt;

    &lt;/div&gt;

    &lt;/div&gt;&lt;!--MULTI CHOICE--&gt;&lt;div id="type-2"&gt;

    &lt;div class="panel"&gt;
        &lt;label&gt;Answer Type (Multiple Choice)&lt;/label&gt;
        &lt;ol style="list-style-type: square;"&gt;
         &lt;li&gt;&lt;label&gt;&lt;input id="mc-tbox" type="checkbox" name="mc-1"&gt; Correct&lt;/label&gt;&lt;input id="mc-tbox" type="text" placeholder="A" name="mc-l1" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;label&gt;&lt;input id="mc-tbox" type="checkbox" name="mc-2"&gt; Correct &lt;/label&gt;&lt;input id="mc-tbox" type="text" placeholder="B" name="mc-l2" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;label&gt;&lt;input id="mc-tbox" type="checkbox" name="mc-3"&gt; Correct &lt;/label&gt;&lt;input id="mc-tbox" type="text" placeholder="C" name="mc-l3" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;label&gt;&lt;input id="mc-tbox" type="checkbox" name="mc-4"&gt; Correct &lt;/label&gt;&lt;input id="mc-tbox" type="text" placeholder="D" name="mc-l4" &gt;&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;

    &lt;/div&gt;&lt;!--RADIO CHOICE--&gt;&lt;div id="type-3"&gt;

    &lt;div class="panel"&gt;
        &lt;label&gt;Answer Type (Radio Choice)&lt;/label&gt;
        &lt;ol style="list-style-type: circle;"&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="A" name="rc-l1" &gt;     &lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="B" name="rc-l2" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="C" name="rc-l3" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="D" name="rc-l4" &gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;select name="rd-crt"&gt;
        &lt;label&gt;Correct letter
        &lt;option value=""&gt;A&lt;/option&gt;
        &lt;option value=""&gt;B&lt;/option&gt;
        &lt;option value=""&gt;C&lt;/option&gt;
        &lt;option value=""&gt;D&lt;/option&gt;
        &lt;/label&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;/div&gt;&lt;!--DROPDOWN--&gt;&lt;div id="type-4"&gt;

    &lt;div class="panel"&gt;
        &lt;label&gt;Answer Type (Dropdown)&lt;/label&gt;
        &lt;ol style="list-style-type: circle;"&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="A" name="rc-l1" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="B" name="rc-l2" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="C" name="rc-l3" &gt;&lt;/li&gt;
         &lt;li&gt;&lt;input id="rc-tbox" type="text" placeholder="D" name="rc-l4" &gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;select name="sd-crt"&gt;
        &lt;label&gt;Correct letter
        &lt;option value=""&gt;A&lt;/option&gt;
        &lt;option value=""&gt;B&lt;/option&gt;
        &lt;option value=""&gt;C&lt;/option&gt;
        &lt;option value=""&gt;D&lt;/option&gt;
        &lt;/label&gt;
        &lt;/select&gt;

    &lt;/div&gt;

    &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="large-10 columns"&gt;
    &lt;label&gt;Help Text
    &lt;input type="text" placeholder="e.i Enter a name" name="qhelp"&gt;
    &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="small-5 columns"&gt;
    &lt;label&gt;
    &lt;input id="useht" type="checkbox" name="useht" value="use" required checked&gt;
    Use Help Text&lt;/label&gt;
    &lt;label&gt;
    &lt;input type="checkbox" id="showwork" name="showwork"&gt; 'Show Work' Textarea
    &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="large-12 columns"&gt;  
    &lt;label&gt;Public Comments&lt;textarea cols="20" rows="2" name="pcomm"&gt;&lt;/textarea&gt;&lt;/label&gt;
    &lt;label&gt;Private Comments&lt;textarea cols="20" rows="2" name="pcommprv"&gt;&lt;/textarea&gt;&lt;/label&gt;
    &lt;/div&gt;

    &lt;script&gt;
    document.getElementById("type-1").hide();
    document.getElementById("type-2").hide();
    document.getElementById("type-3").hide();
    document.getElementById("type-4").hide();
    $('#qtype').change(function() {
    $('.my-div-class:visible').hide();
    $('#type-' + $('#qtype').val()).show();
    });
    &lt;/script&gt;
    &lt;/html&gt;
</code></pre>