根据iframe AJAX/jQuery中的select标签显示特定的div并隐藏其他div？
根据iframe AJAX/jQuery中的select标签显示特定的div并隐藏其他div？
提问于 2016-02-15 12:18:12
是的，我知道这个问题有很多好的答案，但是，我似乎不能让代码在我的情况下工作。这是我正在做的一个大项目，制作数字工作表。我试图根据标签的值使某些面板可见，但是我尝试的所有代码都不能适应我的案例，因为问题模板(提交它的位置基于?q=编号)在iframe中，以节省时间和文件大小。有没有可能做一个按钮来更新可见的面板，或者在iframe中为它做AJAX？我没有任何使用AJAX或jQuery的经验，是的，我尝试过学习它们，但在我看来它们太复杂了。
我找到了这个答案，但由于某种原因，它不起作用。
提示:如果你给我完整的代码(谢谢！)只要知道文本、段落和数学都会导致div类型-1
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/f.css">
<script src="../assets/fjquery.js"></script>
<script src="../assets/f.js"></script>
<script src="../assets/fm.js"></script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<label>Question
<input type="text" placeholder="e.i Who was the discoverer of evolution?" name="q-name" required>
</label>
<div class="large-12 columns">
<label>Question Type
<span style="color: #bbb;"> <i>Click 'Update Field' after selection.</i></span>
<select id="qtype" name="qtype">
<option value="2">Multiple Choice</option>
<option value="3">Radio choice</option>
<option value="1">Text</option>
<option value="1">Paragraph</option>
<option value="4">Selection Dropdown</option>
<option value="1">Mathmatical</option>
</select>
</label>
<a onClick="updateQTp()">Update Field</a> |
<a onClick="hide()">Hide All Fields</a>
<p id="tester"></p>
</div>
<div class="large-12 columns">
<!--TEXT, PARAGRAPH, MATH--><div id="type-1">
<div class="panel">
<label>Answer Type (Text, Paragraph, Mathmatical)</label>
<input id="radio1" type="radio" name="tpm" value="simple" checked><label for="radio1">Has Simple Answer</label>
<input id="radio2" type="radio" name="tpm" value="complex"><label for="radio2">Has Complex Answer</label>
<input id="radio3" type="radio" name="tpm" value="human"><label for="radio3">Needs manual correction</label>
<hr style="padding: 4; margin: 0;" />
<label>Correct Answer (Simple Answer Only)
<input type="text" placeholder="e.i Charles Darwin" name="abox">
</label>
</div>
</div><!--MULTI CHOICE--><div id="type-2">
<div class="panel">
<label>Answer Type (Multiple Choice)</label>
<ol style="list-style-type: square;">
<li><label><input id="mc-tbox" type="checkbox" name="mc-1"> Correct</label><input id="mc-tbox" type="text" placeholder="A" name="mc-l1" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-2"> Correct </label><input id="mc-tbox" type="text" placeholder="B" name="mc-l2" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-3"> Correct </label><input id="mc-tbox" type="text" placeholder="C" name="mc-l3" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-4"> Correct </label><input id="mc-tbox" type="text" placeholder="D" name="mc-l4" ></li>
</ol>
</div>
</div><!--RADIO CHOICE--><div id="type-3">
<div class="panel">
<label>Answer Type (Radio Choice)</label>
<ol style="list-style-type: circle;">
<li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" > </li>
<li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
<li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
<li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
</ol>
<select name="rd-crt">
<label>Correct letter
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
<option value="">D</option>
</label>
</select>
</div>
</div><!--DROPDOWN--><div id="type-4">
<div class="panel">
<label>Answer Type (Dropdown)</label>
<ol style="list-style-type: circle;">
<li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" ></li>
<li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
<li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
<li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
</ol>
<select name="sd-crt">
<label>Correct letter
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
<option value="">D</option>
</label>
</select>
</div>
</div>
</div>
<div class="large-10 columns">
<label>Help Text
<input type="text" placeholder="e.i Enter a name" name="qhelp">
</label>
</div>
<div class="small-5 columns">
<label>
<input id="useht" type="checkbox" name="useht" value="use" required checked>
Use Help Text</label>
<label>
<input type="checkbox" id="showwork" name="showwork"> 'Show Work' Textarea
</label>
</div>
<div class="large-12 columns">
<label>Public Comments<textarea cols="20" rows="2" name="pcomm"></textarea></label>
<label>Private Comments<textarea cols="20" rows="2" name="pcommprv"></textarea></label>
</div>
<script>
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();
});
</script>
</html>回答 1
Stack Overflow用户
发布于 2016-02-15 12:33:29
在发生更改之前，您是否必须将信息发送到服务器？因为如果不是这样，您可以使用JQuery完成此操作。(field =问题字段，new_field =淡入字段，answer =正确答案)
$(document).on('change', "#qtype", function() {
if ($("#qtype").val() == "1") {
$("#type-1").fadeIn("slow");
}
else if ($("#qtype").val() == "2"){
$("type-2").fadeIn("slow");
}
else if ($("#qtype").val() == "3") {
$("type-3").fadeIn("slow");
}
else {
$("type-4").fadeIn("slow");
}
});如果我正确地理解了你的问题和关注点，这应该是可行的。那里的括号可能会有一些小问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35401421
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号