Drop down table and jquery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-01 18:06 出处：网络

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?)

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 ta开发者_如何学运维ble for myAnswers and it didn't work. Does anyone know where am I mistaken?

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();
    });
});

<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

精彩评论

关注公众号

热门标签

图文推荐

Drop down table and jquery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：