时间戳

首页 > 解决方案 > 当我在 jquery 中调用它的内容时，div 标签没有显示

java - 当我在 jquery 中调用它的内容时，div 标签没有显示

问题描述

html代码：

<div class="col-md-12">
                      <span>Select Payment Option</span>
 <select class="form-control" name="select1" id="select1" 
 onchange="fun_showtextbox()">
 <option value="x">Cash</option>
  <option value="y">Cheque</option>
  <option value="z">Mobile Money</option>

 </select>
  </div>
  <div class ="row" style="display:none;" id="mobileno_textbox">
  <div class="col-md-12">
  <div class="form-group label-floating is-empty is-focused">
    <label class ="control-label">Cash</label>
  <input type="text" name="select" "id="select"class="form- 
  control"placeholder="number">
 </div>
 </div>                                                                   
 </div>
 <div class ="row">
   <div class="col-md-12">
  <div class="form-group label-floating is-empty is-focused">
  <label class ="control-label">Amount: </label>
   <input type="text" name="select" "id="select"class="form-control" 
  placeholder="amount">
   </div>
   </div>                                                                     
 </div>

调用该函数后，数字中的 div 内容不显示。jQuery代码：

function fun_showtextbox()
 {
  var select_status=$('#select1').val();
 /* select  from select box then show my text box */

  if(select_status == "y")
   {
    $('#mobileno_textbox').show();// By using this id you can show your 
  content    
   }
     else
   {
    $('#mobileno_textbox').hide();// otherwise hide   
  }

 }

我不知道我做错了什么，但 id="mobileno_textbox" 的 div 内容没有显示？

标签： javajqueryhtml

解决方案

看起来你可能有一些错别字。尤其是你的身份证。你有"id="select"

无论如何，我认为我在这里工作。

https://jsfiddle.net/qLg1fy9d/

js

$(document).ready(function() {
  fun_showtextbox();
  $('#select1').change(function() {
    fun_showtextbox();
  })
});

function fun_showtextbox() {
  var select_status = $('#select1').val();
  /* select  from select box then show my text box */

  if (select_status == "y") {
    $('#mobileno_textbox').show(); // By using this id you can show your 
    content
  } else {
    $('#mobileno_textbox').hide(); // otherwise hide   
  }

}

html

<div class="row">
  <div class="col-md-12">
    <span>Select Payment Option</span>
    <select class="form-control" name="select1" id="select1">
       <option value="x">Cash</option>
      <option value="y">Cheque</option>
      <option value="z">Mobile Money</option>
    </select>
  </div>
</div>

<div class="row" style="display:none;" id="mobileno_textbox">
  <div class="col-md-12">
    <div class="form-group label-floating is-empty is-focused">
      <label class="control-label">Cash</label>
      <input type="text" name="select" id="select" class="form-control" placeholder="number">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="form-group label-floating is-empty is-focused">
      <label class="control-label">Amount: </label>
      <input type="text" name="select" id="select" class="form-control" placeholder="amount">
    </div>
  </div>
</div>

推荐阅读