Javascript 带有java脚本的下拉菜单。根据第一个下拉菜单更改值

我有两个下拉列表。两个下拉列表中的选项都是男性和女性。如果我在一个下拉列表中选择男性选项，它会在另一个下拉列表中自动更改女性。 我该怎么做呢？

试试这个

 <select id="cat1">
<option value="0">Select</option>
    <option value="Male">Male</option>
   <option value="Female">Female</option>
</select>
<select id="cat2">
<option value="0">Select</option>
    <option value="Male">Male</option>
   <option value="Female">Female</option>
</select>

Html和JS

$（文档）.ready（函数（）{
$（“#dp1”）.更改（函数（）{
if（$（this.val（）=“male”）
$（“#dp2>选项：等式（1）”.prop（'selected'，true）；
其他的
$（“#dp2>选项：eq（0）”.prop（'selected'，true）；
});
$（“#dp2”）.更改（函数（）{
if（$（this.val（）=“male”）
$（'#dp1>选项：等式（1）”.prop（'selected'，true）；
其他的
$（'#dp1>选项：eq（0）”.prop（'selected'，true）；
});
});

男性的
女性的
男性的
女性的
到目前为止，您尝试了什么？发布一些代码，告诉你在哪里面临问题。$（“#field_mdipxp”）.change（function（）{if（$（this.val（）=“Male”）{$（“#field_akgi9h”）.val（“Male”）；}if（$（this.val（）=“Male”）{$（“#field_akgi9h”）.val（=“Male”）}）；您的项目中是否包含Jquery外部文件？类型错误：$不是函数$（“#field_mdipxp”）。更改（函数（）{
将此包含在脚本顶部的脚本部分中单击下一步后请选择“关节”
$( "#cat1" ).change(function() {
    if ($(this).val() == "Male"){
        $("#cat2").val("Female");
    } 
    if ($(this).val() == "Female"){
        $("#cat2").val("Male");
    } 
});