Question

代码：http://jsfiddle.net/HB8h9/7/

<div id="tab-2" class="tab-content">

        <label for="tfq" title="Enter a true or false question">
            Enter a Multiple Choice Question
        </label> <br />

        <textarea name="tfq" rows="3" cols="50"></textarea>
        <p>Mark the correct answer</p>
        <input type="radio" name="multians" value="A">A)</input>
        <input name="Avalue" type="text">
        <br>
        <input type="radio" name="multians" value="B">B)</input>
        <input name="Bvalue" type="text">
        <br>
        <input type="radio" name="multians" value="C">C)</input>
        <input name="Cvalue" type="text">
        <br>
        <input type="radio" name="multians" value="D">D)</input>
        <input name="Dvalue" type="text">
        <br>

//以下不同的文件用作主页

$(document).ready(function() {
    $("#second li ").click(function() {
        $("#content").load("file_above.html .tabs");
    });
});

尝试使用包含select选项标签的不同文件中的div元素创建测验。需要创建一个函数，根据所选选项加载所有“适当的div标签”，并在选择每个选项后再次显示下拉选项。我不确定何时在每个问题类型加载后或在5到10个问题之间实现提交按钮。提交按钮会将选中的问题“存储”到测验中，该测验稍后将用于其他用户回答。

我希望这是有道理的，我对jquery不太熟悉，任何帮助都会受到高度赞赏。

也欢迎任何其他更适合的技术。感谢。

Answer 1

你必须设置一个id来选择element和hadle onChange事件。有点像：

$(document).ready(function(){
    $('#selectionId').onChange(function(){
        /*load new options into select element*/
        $(this).append('option data-tab="tab-6">New option text</option>');
        /*displaying desired div. Using HTML5 data attributes as in the fiddle*/
        var selected=$(this).attr('data-tab');
        if (selected==='tab-1'){
            /*load or display tab-1 class div*/
        }else...
    });
});

您可以拥有各种html文件，只需要加载相应的选项卡，或者在同一个文件中定义了select元素，您可以将标签类div与visibility属性设置为'none'，并在用户选择后显示目标div一个选项。

就个人而言，我更喜欢最后一个选项。

Answer 2

我希望这可以解决您的问题

http://jsfiddle.net/r9sv8/

使用.change()收听所选内容并显示div尊重。

$('.tabs').change(function(){
        $('.tabQues').hide('500');       // Hides all the divs
        var changeVal = $(this).val();   //Takes the value of the <option>
        if(changeVal=="selectOne"){
            $('.'+changeVal).show('500');   //show the div you want
        }else if(changeVal=="multiple"){
            $('.'+changeVal).show('500');
        }else if(changeVal=="trueFalse"){
            $('.'+changeVal).show('500');
        }else if(changeVal=="short"){
            $('.'+changeVal).show('500');
        }else if(changeVal=="program"){
            $('.'+changeVal).show('500');
        }else{
            $('.tabQues').hide();
        }

创建测验jquery，函数加载选项存储测验

2 个答案: