个人中心
gpt4 book ai didi

javascript - 隐藏文字被隐藏，不会显示

转载 作者：行者123 更新时间：2023-11-28 05:33:36 30 4
gpt4 key购买 nike

下面是我创建选项卡的代码。在每个选项卡中，当我在隐藏文本框中的每个选项卡中选择值印度时，我都会有一个下拉列表，这意味着如果我在选项卡1下拉隐藏文本框中选择值印度，则不应显示选项卡2和选项卡3，并且我需要更改w3 - 红色边框改为 #00a8a8 颜色

function openCity(evt, cityName) {

  var i, x, tablinks;
  x = document.getElementsByClassName("sendingType");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(
      " w3-border-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-red";
}


$(document).ready(function() {
  $("#ddlPassport").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});

$(document).ready(function() {
  $("#ddlPassport1").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});

$(document).ready(function() {
  $("#ddlPassport2").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});
.sendingType {
  display: none;
}
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body class="w3-container">

  <h2>Tabs in a Grid</h2>

  <div class="w3-row">
    <a href="#" onclick="openCity(event, 't1');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1

      </div>
    </a>
    <a href="#" onclick="openCity(event, 't2');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div>
    </a>
    <a href="#" onclick="openCity(event, 't3');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div>
    </a>
  </div>
  <br>

  <div id="t1" class="w3-container sendingType">

    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>
      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>



    <div id="dvPassport" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>



  </div>



  <div id="t2" class="w3-container sendingType">


    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>
      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport1">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>
    <div id="dvPassport1" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>


  </div>

  <div id="t3" class="w3-container sendingType">


    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>

      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport2">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>
    <div id="dvPassport2" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>

    </div>
  </div>
</body>

最佳答案

您每次都使用相同的隐藏文本框 ID。我们使用各自的文本框 ID。而且你不需要每次都使用ready函数。您可以使用一次并在其中添加所有其他功能。

$(document).ready(function() {  
$("#ddlPassport").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});


  $("#ddlPassport1").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport1").show();
    } else {
      $("#dvPassport1").hide();
    }
  });


  $("#ddlPassport2").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport2").show();
    } else {
      $("#dvPassport3").hide();
    }
  });
});

关于javascript - 隐藏文字被隐藏，不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39524390/

30 4 0
文章推荐： javascript - 如何在导航中选择元素
文章推荐： javascript - 任何人都可以建议在模式打开时在 Firefox 中使用箭头键滚动页面的解决方案吗？
文章推荐： javascript - 'Function' 上的 MDN 描述感到困惑，Function.length 是 Function 或 Function.prototype 的属性
文章推荐： javascript -
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com