如果我使用jquery选择下拉列表更改为否，请删除该值

嗨，我有这个选择下拉列表，其中只有是和否。当我选择“是”时，将出现另一个下拉列表选择，当我选择“否”时，下拉列表将消失。我使用它作为jquery隐藏。我希望当我选择“是”时，另一个下拉列表将显示，当我选择“否”时，另一个下拉列表将隐藏，但当我单击“是”时，我希望所选下拉列表中的值将重置。下面是我的密码

<div class="form-group" style="float:left;">
    <label for="Inputhavepets">Have pets<sup>*</sup></label>
    <select name="have_pets" id="have_pets" class="form-control" >
      <option value="0">-----SELECT ONE-----</option>
      <option value="1">Yes</option>
      <option value="2">No</option>

    </select>      
</div>
<div id="pet_hide" class="form-group" style="float:left;" >
    <label for="Inputhavepetsdog">&nbsp;</label>
    <select name="pets_hide" class="form-control" >
      <option value="0">-----SELECT PET-----</option>
      <option value="1">Dog</option>
      <option value="2">Cat</option>

    </select>      
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $("#pet_hide").hide();
     $('#have_pets').on('change', function() {
          //alert( this.value ); // or $(this).val()
          var pet = $('#have_pets').val();
          if(pet == 1){
            $("#pet_hide").show();
          }else{
            $("#pet_hide").hide();


          }
     });
  });
</script>

下面是我的jquery代码

<div class="form-group" style="float:left;">
    <label for="Inputhavepets">Have pets<sup>*</sup></label>
    <select name="have_pets" id="have_pets" class="form-control" >
      <option value="0">-----SELECT ONE-----</option>
      <option value="1">Yes</option>
      <option value="2">No</option>

    </select>      
</div>
<div id="pet_hide" class="form-group" style="float:left;" >
    <label for="Inputhavepetsdog">&nbsp;</label>
    <select name="pets_hide" class="form-control" >
      <option value="0">-----SELECT PET-----</option>
      <option value="1">Dog</option>
      <option value="2">Cat</option>

    </select>      
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $("#pet_hide").hide();
     $('#have_pets').on('change', function() {
          //alert( this.value ); // or $(this).val()
          var pet = $('#have_pets').val();
          if(pet == 1){
            $("#pet_hide").show();
          }else{
            $("#pet_hide").hide();


          }
     });
  });
</script>

有人能帮我解决这个问题吗？非常感谢您的帮助。谢谢

<script type="text/javascript">
  $(document).ready(function(){
    $("#pet_hide").hide();
     $('#have_pets').on('change', function() {
          //alert( this.value ); // or $(this).val()
          var pet = $('#have_pets').val();
          if(pet == 1){
            $("#pet_hide option:first").prop('selected',true); // <--------value '0' will be selected
            $("#pet_hide").show();
          }else{
            $("#pet_hide").hide();
          }
     });
  });
</script>

---

在脚本上尝试以下操作：

$(document).ready(function(){
    $("#pet_hide").hide();
     $('#have_pets').on('change', function() {
          var pet = $('#have_pets').val();
          if(pet == 1){
            $('select[name="pets_hide"] option:first').prop('selected', true);
            $("#pet_hide").show();

          }else{

            $("#pet_hide").hide();

          }
     });
  });

---

@你好…奇怪，它会工作仔细看，一定是其他地方有问题…这是我的选择名称代码---选择宠物---狗猫我想当我选择否，然后选择是其他下拉选择将重置为0试用$PET\u隐藏选项：eq0.attrselected，selected；选择第一个值，即用代码重置选择？好的，我试试你的代码