我试图在其他人的基础上打开下拉菜单和其他字段。我正在尝试为客户创建一个表单，以满足特定要求。
DIV将根据使用jquery选择的下拉列表隐藏和显示。
以下是我的html代码的样子。
<div class="website-type">
<label class=""><b>Website Type</b>
<select>
<option>--------Select--------</option>
<option value="static-website">Static Website</option>
<option value="dynamic-website">Dynamic Website</option>
<option value="ecommerce-website">eCommerce Website</option>
<option value="seo">Search Engine Optimization</option>
<option value="graphic-design">Graphic Design</option>
</select>
</label>
</div>
<div class="static-website" id="static-website">
<label class=""><b>Design Level</b>
<select>
<option>--------Select--------</option>
<option value="basic-design">Basic Design</option>
<option value="business-design">Business Design</option>
<option value="creative-design">Creative Design</option>
</select>
</label>
<br/>
<div class="static-website-basic">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Basic Static Box -->
<div class="static-website-business">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="10" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="10" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of BUSINESS Static Box -->
<div class="static-website-creative">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Creative Static Box -->
</div> <!-- End of Static Box -->
这只是我正在使用的常规jquery。这是我如何使用我的jquery
$("select").change(function()
{
$( "select option:selected").each(function()
{
if($(this).attr("value")=="static-website"){
$(".dynamic-website").hide();
$(".ecommerce-website").hide();
$(".seo").hide();
$(".graphic-design").hide();
$(".static-website").show();
}
if($(this).attr("value")=="basic-design"){
$(".static-website-business")..hide();
$(".static-website-creative").hide();
$(".static-website-basic").show();
}
if($(this).attr("value")=="business-design"){
$(".static-website-basic").hide();
$(".static-website-creative").hide();
$(".static-website-business").show();
}
if($(this).attr("value")=="creative-design"){
$(".static-website-basic").hide();
$(".static-website-business").hide();
$(".static-website-creative").show();
}
}
});
}).change();
});
我不希望每个div都有这么多.hide和.show属性。我的一个下拉是基于另一个下拉选择第二个下拉选择。
这只是静态网站。然后我还有其他几个领域。我不知道我怎么能这样做。我不想让它变得非常复杂，我只是想让事情变得简单和可重复使用，所以我不必使用这么多.hide和.show
如有任何建议。请帮忙。
谢谢！
答案 0 :(得分：2)
根据需要更好地隐藏和展示。
var oldselected;
$("select").on('change',this,function(e){
if(oldselected){$('.'+oldselected).hide();}
var selectedopt=$(this).val();
$('.'+selectedopt).show();
oldselected=selectedopt;
});div:not(.website-type){display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="website-type">
<label class=""><b>Website Type</b>
<select>
<option>--------Select--------</option>
<option value="static-website">Static Website</option>
<option value="dynamic-website">Dynamic Website</option>
<option value="ecommerce-website">eCommerce Website</option>
<option value="seo">Search Engine Optimization</option>
<option value="graphic-design">Graphic Design</option>
</select>
</label>
</div>
<div class="static-website" id="static-website">
<label class=""><b>Design Level</b>
<select>
<option>--------Select--------</option>
<option value="basic-design">Basic Design</option>
<option value="business-design">Business Design</option>
<option value="creative-design">Creative Design</option>
</select>
</label>
<br/>
<div class="static-website-basic">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Basic Static Box -->
<div class="static-website-business">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="10" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="10" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of BUSINESS Static Box -->
<div class="static-website-creative">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Creative Static Box -->
</div> <!-- End of Static Box -->
答案 1 :(得分：1)
我构建了一个快速实用程序，它接受了一些数据属性......
<强> http://jsfiddle.net/buxbajvd/
<form class="progressiveDisclosure">
<select name="selectNode" class="associatedHandler">
<option>foobar</option>
<option>something</option>
</select>
</form>
<div class="associatedListener" style="display: none;" data-for="selectNode" data-value="something" data-props="matchAll">selectNode is something</div>
data-for必须与处理程序名称属性匹配，并且数据值必须与此节点的值相匹配才能显示。它也可以接受多个参数data-for="someSelect,someSelect2" data-value="someValue,someValue2"
也可以使用反向调节并设置data-value="!someValue"
var progressiveDisclosure = $('.progressiveDisclosure'),
associatedHandlers = $('.associatedHandler'),
associatedListeners = $('.associatedListener'),
toggleAssociatedListeners = function(e){
var name = $(e.target).attr('name');
$.each(associatedListeners, function(index, node){
var names = node.associationFor,
values = node.associationValue,
valid = false,
matchAll = false;
if(node.associationOpts && node.associationOpts.indexOf('matchAll') > -1){
matchAll = true;
}
var inputIsAssociation = false;
for(var i=0;i<names.length;i++){
if(names[i] == name){
inputIsAssociation = true;
}
var value = progressiveDisclosure.serializeArray().filter(function(input){
return input.name == names[i];
})[0].value;
if(values[i].indexOf('!') > -1 && values[i].replace('!','') !== value){
valid = true;
} else if(values[i].indexOf('!') > -1 && values[i].replace('!','') == value){
valid = false;
if(!matchAll){
break;
}
} else if(values[i] == value){
valid = true;
if(!matchAll){
break;
}
} else if(matchAll){
valid = false;
break;
}
}
if(!inputIsAssociation){
return;
}
if(valid){
$(node).show();
} else if(inputIsAssociation) {
$(node).hide();
}
});
}
$.each(associatedListeners, function(index, node){
var $node = $(node),
opts = $node.data('props');
node.associationFor = $node.data('for').split(',');
node.associationValue = $node.data('value').split(',');
if(opts){
node.associationOpts = opts.split(',');
}
});
associatedHandlers.on('change', this, function(e){
toggleAssociatedListeners(e);
});
答案 2 :(得分：0)
我会去隐藏所有显示你想要的东西，但加上尝试从原始选择器编造名称：
$('select').change(){
$('.divclass').hide();//which youll have to add
var id = $(this).val(); //or
$(this).find('selected').val()
//not sure which works for selects
id=id.replace('design','')
//obviously you need a replace for this specific example('design','');
$('#static-website-'+id).show();
}
简而言之，您要显示的ID以及与ID相关的选项或值
答案 3 :(得分：-1)
您可以隐藏所有内容，并显示您想要的内容。
function showD(whatYouWantShow){
//hide all $(".mydiv").hide();
//show whatYouWantShow $("#d1").show();
}
<div class=mydiv id="d1"></div>
<div class=mydiv id="d2"></div>
<div class=mydiv id="d3"></div>