隐藏的文字被隐藏，不会显示

时间：2016-09-16 05:39:06

标签： javascript jquery html css

以下是我创建标签的编码。在每个我有一个下拉当我选择隐藏文本框中的每个选项卡中的值india应该显示在特定选项卡上意味着如果我在tab1中选择值india下拉隐藏文本框不应该显示tab2和tab3我需要更改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>

2 个答案:

答案 0 :(得分：0)

您每次都使用相同的隐藏文本框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();
    }
  });
});

答案 1 :(得分：0)

<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>
相关问题
最新问题