显示2按钮的Ajax组合框

时间:2017-02-18 19:07:18

标签: javascript jquery ajax combobox

如何创建一个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>

1 个答案:

答案 0 :(得分:1)

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

$(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();
    }

  });
});

javascript将如下所示

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

并且css将是

{{1}}

基本上这是为了在选择选项时显示按钮

您可以查看this