gpt4 book ai didi

javascript - 显示 2 个按钮的 Ajax 组合框

转载 作者:行者123 更新时间:2023-12-03 04:58:46 25 4
gpt4 key购买 nike

如何制作 Ajax 组合框,Forexamle FemaleMale,并且我想显示一个女性按钮和一个男性按钮,这是我的代码

<!DOCTYPE html>
<html>
<head>
<style>
#for-male, #for-female{
display:none;
}
</style>
</head>
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>


</body>
</html>

最佳答案

您不需要 ajax 调用。如果您只想根据所选选项确定将显示的按钮。

<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>

JavaScript 看起来像这样

$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}

});
});

CSS 将是

#for-male, #for-female{
display:none;
}

本质上,它的作用是在选择选项时显示一个按钮

您可以查看https://jsfiddle.net/tmwjge9s/1/

关于javascript - 显示 2 个按钮的 Ajax 组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42319469/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com