Drop down table and jquery

Question

I'm trying to make a drop down table using jQuery, with a similar code like here: (from the topic: Conditional simple drop down list?)

<body>
<div id="myQuestions">
    <select id="QuestionOptions">
        <option value="A">Question A</option>
        <option value="B">Question B</option>
    </select>
</div>
<div id="myAnswers">
    <div id="A" style="display: none;">
        <div id="QuestionC">
            <p>Here is an example question C.</p>
        </div>
        <div id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </div>
    </div>
    <div id="B" style="display: none;">
        <div id="QuestionE">
            <p>Here is an example question E.</p>
        </div>
        <div id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </div>
    </div>
</div>

And the jQuery part

$(function () {
$('#QuestionOptions').change(function () {
    $('#myAnswers > div').hide();
    $('#myAnswers').find('#' + $(this).val()).show();
});
});

My problem is, when I finish to table the part of "myQuestions", and start to table the part of "myAnswers", the dynamic part of the table doesn't work. In this case, the myAnswers part won't be hidden, it'll be shown since the beginning. I tried to put everything in one table, then I tried to create a different table for myQuestions, then another table for myAnswers and it didn't work. Does anyone know where am I mistaken?

Do you mean, you want to use table (and tr, td) instead of DIVs? — ifaour, Dec 25 '10 at 15:17
I'm trying to do something like
Other questions...
Do yo like ...
. A div for a type of question, and inside this div, a cell for the question (in text), and a cell for the answer (drop down, input, radio button). — Marcelo, Dec 25 '10 at 15:28
why do u need table tags in the first place itself?. You shuld be fine with nested div's. — A_Var, Dec 25 '10 at 15:42

score 1 · Accepted Answer · edited Jun 26 '17 at 23:36

Without knowing the new structure of the table, it's hard to answer, but anyway is this what you want?

HTML

<table id="myQuestions">
    <tr>
        <td>
            <select id="QuestionOptions">
                <option value="A">Question A</option>
                <option value="B">Question B</option>
            </select>
        </td>
    </tr>
</table>
<table id="myAnswers">
    <tr id="A" style="display: none;">
        <td id="QuestionC">
            <p>Here is an example question C.</p>
        </td>
        <td id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </td>
    </tr>
    <tr id="B" style="display: none;">
        <td id="QuestionE">
            <p>Here is an example question E.</p>
        </td>
        <td id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </td>
    </tr>
</table>

Javascript

$(function() {
    $('#QuestionOptions').change(function() {
        $('tr', '#myAnswers').hide();
        $('#myAnswers').find('#' + $(this).val()).show();
    });
});

the table is the div itself. Nested div's are XHTML version of CSS tables. — A_Var, Dec 25 '10 at 15:41
Yes, humm, seems like I forgot to modify the jquery part. Thank you very much. But can't I use div and td tr at the same time ? — Marcelo, Dec 25 '10 at 15:43
@Marcelo - the way you mentioned it on the comments, no you can't..also as A_Var said, why do you want to use tables? whats wrong with the answer from your previous question? — ifaour, Dec 25 '10 at 15:49

A_Var · Answer 2 · 2010-12-25T15:51:01.397

<div id="parTable">
<div id="myQuestions">
    <select id="QuestionOptions">
        <option value="A">Question A</option>
        <option value="B">Question B</option>
    </select>
</div>
<div id="myAnswers">
    <div id="A" style="display: none;">
        <div id="QuestionC">
            <p>Here is an example question C.</p>
        </div>
        <div id="QuestionD">
            <select id="QuestionOptionsD">
                <option value="G">Question G</option>
                <option value="H">Question H</option>
            </select>
        </div>
    </div>
    <div id="B" style="display: none;">
        <div id="QuestionE">
            <p>Here is an example question E.</p>
        </div>
        <div id="QuestionF">
            <select id="QuestionOptionsF">
                <option value="I">Question I</option>
                <option value="J">Question J</option>
            </select>
        </div>
    </div>
 </div>
</div>

$(function () {
$('#QuestionOptions').change(function () {
    $('#myAnswers').find('#' + $(this).val()).toggle();
});
});

Drop down table and jquery

2 Answers2