使用jquery选择选项时隐藏表单选项
使用jquery选择选项时隐藏表单选项
提问于 2015-01-13 13:02:27
当从程序下拉菜单中选择一个选项时，我正在尝试一些下拉显示/隐藏选项，一位朋友给我发送了这种格式的脚本，但我想不出如何让它像我一样--不是jquery和javascript中最有经验的--但是这对他有效(他在下拉列表中使用文本链接而不是选项)
HTML
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="location" class="col-sm-4 control-label">Choose a Location</label>
<div class="col-sm-8">
<select id="selection" class="form-control">
<option selected="selected" value="none">None</option>
<option value="Dubai">Dubai</option>
<option value="bora">Bora Bora</option>
<option value="vancouver">Vancouver</option>
<option value="rio">Rio De Janeiro</option>
</select>
</div><br></br>
<label for="length" class="col-sm-4 control-label">Choose a Resort</label>
<div class="col-sm-8">
<select class="form-control">
<option id="none">None</option>
<option class="location dubai">Resort 1</option>
<option class="location dubai">Resort 2</option>
<option class="location bora">Resort 3</option>
<option class="location bora">Resort 4</option>
<option class="location vancouver">Resort 5</option>
<option class="location rio">Resort 6</option>
</select>
</div><br></br>剧本
<script src="assets/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#selection").change(function(){
var selection = $(this).val();
if(selection == "none"){
$("#none").find(".location").show();
}else{
$("#none").find(".location").not("."+selection).hide();
$("."+selection).show();
}
});
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-13 13:23:07
这是完整的代码
HTML
<select id="firstSelect">
<option value="0" selected="selected">None...</option>
<option value="dubai">Dubai</option>
<option value="bora">Bora Bora</option>
<option value="vancouver">Vancouver</option>
<option value="rio">Rio De Janeiro</option>
</select>
<select id="secondSelect">
<option value="0" selected="selected">None...</option>
<option class="location dubai">Resort 1</option>
<option class="location dubai">Resort 2</option>
<option class="location bora">Resort 3</option>
<option class="location bora">Resort 4</option>
<option class="location vancouver">Resort 5</option>
<option class="location rio">Resort 6</option>
</select>JScript
$(function(){
var conditionalSelect = $("#secondSelect"),
// Save possible options
options = conditionalSelect.children(".location").clone();
$("#firstSelect").change(function(){
var value = $(this).val();
conditionalSelect.children(".location").remove();
options.clone().filter("."+value).appendTo(conditionalSelect);
}).trigger("change");
});这是工作的示例
Stack Overflow用户
发布于 2015-01-13 13:20:37
将迪拜选项的值从迪拜更改为“迪拜”，因为它区分大小写并使其如下所示：
$(document).ready(function(){
$("#selection").change(function(){
var selection = $(this).val();
if(selection == "none"){
$(".location").show();
}else{
$(".location").not("."+selection).hide();
$("."+selection).show();
}
});
})YOu还可以将ID设置为select like：<select id ="locSelect" class="form-control">，然后使用类似于此$("#locSelect .location")的选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27922848
复制相关文章
相似问题
腾讯云开发者
