我有一个带有两个选项的选择框。 根据选项,我需要显示一组不同的复选框。 根据用户在选择中选择的内容,我将显示一组复选框或其他复选框。
我在这里举了一个例子:
http://jsbin.com/acOXisI/20/edit
如何抓住选择器中选择的选项? 接下来我如何显示或不显示复选框字段集?
非常感谢!
答案 0 :(得分:1)
您需要的JavaScript是:
// hide the fieldsets on page load
$(".otion1, .otion2").hide();
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
$(".otion1").show();
$(".otion2").hide();
} else if($this.val() === "2") {
$(".otion1").hide();
$(".otion2").show();
} else {
$(".otion1, .otion2").hide();
}
});
// prevent hidden checkboxes from being submitted
$("form").submit(function() {
$(this).find("input[type='checkbox']").filter(":hidden").each(function() {
this.checked = false;
});
});
并为您的选择选项添加一些值:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
请参阅已编辑的演示:http://jsbin.com/acOXisI/23/edit
答案 1 :(得分:1)
尝试:
jQuery("#selector option:selected").val();
要获取该选项的文字,请使用text()
:
jQuery("#selector option:selected").text();
更多信息:
答案 2 :(得分:1)
首先,您不应该在页面上有重复的ID。
另外,我建议您为所有复选框添加唯一的输入名称,并始终从单个表单提交所有这些名称(并且您将忽略那些您不需要的名称)。您可以通过多种方式实现所需的功能,其中一种方法是隐藏两个字段集并将监听器设置为select元素 - 您可以使用onchange事件,并检查选择哪一个并根据该显示相应的字段集。 / p>
检查提交的数据时,首先检查选择值,然后选中相应的复选框。
答案 3 :(得分:1)
你必须使用jQuery:
$().ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").text();
console.log(value)
if (value == 'Option 1'){
$('.otion1').show()
$('.otion2').hide()
}
else{
$('.otion1').hide()
$('.otion2').show()
}
})
})
您的bin已克隆并正常工作:
答案 4 :(得分:1)
你可以用jQuery做到这一点。请注意,隐藏字段仍然会被提交,因此它们也需要禁用:
$(function(){
$("#selector").on("change", function(){
$(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
$("."+$(this).val()).show().find("input").removeAttr("disabled");
});
$("#selector").trigger("change");//run on load
});
答案 5 :(得分:0)
您好,您可以使用$(“#selector”)。val()来获取所选选项。
$("#selector").change(function(){
option = $(this).val();
if(option == 1){
$(".option1").show();
$(".option2").hide();
} else if(option == 2) {
$(".option2").show();
$(".option1").hide();
} else {
$(".option2").hide();
$(".option1").hide();
}
});
答案 6 :(得分:0)
我已在您的选项集中添加了唯一的Div ID,然后将它们与精确选定的值相关联。
实施例: http://jsbin.com/acOXisI/18/edit
$(document).ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").val();
if (value == 'option1'){
$('#option1').show();
$('#option2').hide();
}
else if(value == 'option2'){
$('#option1').hide();
$('#option2').show();
}else{
$('#option1').show();
$('#option2').show();
}
});
});