hidden 文字被隐藏，不会显示答案

【问题标题】：hidden text is hidden and will not be displayedhidden 文字被隐藏，不会显示
【发布时间】：2016-09-16 05:39:06
【问题描述】：

下面是我创建标签的代码。在每个选项中，当我在隐藏文本框中的每个选项卡中选择值印度时，我都有一个下拉菜单，它应该显示在特定选项卡上，这意味着如果我在选项卡 1 下拉菜单中选择值印度，隐藏文本框不应该显示选项卡 2 和选项卡 3，我需要更改 w3 -border red to #00a8a8 color

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>

【问题讨论】：

请更改标题Hidden text box is not displaying in each tabs 不是一个好标题。 隐藏文字被隐藏，不会显示
真的吗？ $(this).val()? jQuery 吃光了你的脑筋，你连this.value 都不知道吧？ Web 开发注定要失败。
@Azamantes $(this).val() 有什么问题
一切都错了。调用 2 个函数，而不是简单地通过 this.value 访问 value 属性。你到底为什么要这么做？

标签： javascript jquery html css

【解决方案1】：

您每次都使用相同的隐藏文本框 ID。我们各自的文本框 id。此外，您不需要每次都使用就绪功能。您可以使用一次并在其中添加所有其他功能。

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

【讨论】：

以前在 tab1 中隐藏文本框现在即使你的 jquery 也不会显示

【解决方案2】：

<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" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
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") {
    $("#dvPassport1").show();
  } else {
    $("#dvPassport1").hide();
  }
});
});

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


</script>
<style>
.sendingType {
display: none;
</style>
<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">dropdown1</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 box1</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">dropdown2</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 box2</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">dropdown3</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 box3</label>
      <div class="col-xs-3">
        <input type="text" class="form-control">
      </div>
    </div>

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

【讨论】：