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

Drop down menu with java script.changes value according to first drop down

本文关键字：下拉菜单 第一个 java 脚本 带有      更新时间：2023-09-26

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

试试这个 

 <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>

JavaScript

$( "#cat1" ).change(function() {
    if ($(this).val() == "Male"){
        $("#cat2").val("Female");
    } 
    if ($(this).val() == "Female"){
        $("#cat2").val("Male");
    } 
});

更新的演示

Html 和 JS

$(document).ready(function(){
    $("#dp1").change(function(){
      if ($(this).val() == "male")
          $('#dp2>option:eq(1)').prop('selected', true);
      else
        $('#dp2>option:eq(0)').prop('selected', true);
      });
  $("#dp2").change(function(){
      if ($(this).val() == "male")
          $('#dp1>option:eq(1)').prop('selected', true);
      else
        $('#dp1>option:eq(0)').prop('selected', true);
      });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <body>
     <select id="dp1">
  <option value="male">male</option>
  <option value="female">female</option>
</select> 
    <select id="dp2">
  <option value="male">male</option>
  <option value="female" selected>female</option>
</select>
    </body>

相关文章：