我正在尝试根据选择字段中的值显示和隐藏内容。
如果选择字段的值为“美国”,我只想在 Div 1 中显示内容。如果该值是除“美国”之外的任何其他国家/地区,则仅在 Div 2 中显示内容。但第二部分不起作用。
这是我到目前为止所拥有的。如果选择美国,将显示 Div 1,但如果选择其他国家/地区,则不会显示 Div 2。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=='United States'){
$(".rest1").show();
$(".rest2").hide();
}
if($(this).attr("value")!='United States'){
$(".rest2").show();
$(".rest1").hide();
}
});
}).change();
});
</script>
如果我指定另一个国家/地区,则以下内容有效,但我需要为除“美国”之外的所有国家/地区显示 Div 2。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=='United States'){
$(".rest1").show();
$(".rest2").hide();
}
if($(this).attr("value")=='Austria'){
$(".rest2").show();
$(".rest1").hide();
}
});
}).change();
});
</script>
我缺少什么?
David Thomas - 这里有更多 html 内容。我希望这已经足够了:
$(document).ready(function() {
$("select").change(function() {
$("select option:selected").each(function() {
if ($(this).attr("value") == 'United States') {
$(".rest1").show();
$(".rest2").hide();
}
if ($(this).attr("value") != 'United States') {
$(".rest2").show();
$(".rest1").hide();
}
});
}).change();
});
.rest1,
.rest2 {
display: none;
}
<div>
<label for="country" class="form-label">Country <span class="text-danger">*</span></label>
<select name="country" id="country" class="form-control" {if option:checked}checked{/if}>
<option value="">Select Country</option>
<option value="Austria" {if country=="Austria" }selected="selected" {/if}>Austria</option>
<option value="Bahamas" {if country=="Bahamas" }selected="selected" {/if}>Bahamas</option>
<option value="Belgium" {if country=="Belgium" }selected="selected" {/if}>Belgium</option>
<option value="Canada" {if country=="Canada" }selected="selected" {/if}>Canada</option>
.....
<option value="United States" {if country=="United States" }selected="selected" {/if}>United States</option>
</select>
</div>
<div class="rest1">
Div 1 content
</div>
<div class="rest2">
Div 2 content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>