代码之家 › 专栏 › 技术社区 › Jonathan Akwetey Okine

当我在jquery中调用div标记的内容时,它没有显示

html5 html jquery java

-2

Jonathan Akwetey Okine · 技术社区 · 7 年前

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内容没有显示?

2 回复 | 直到 7 年前

1

0

Bryan Dellinger 7 年前

看起来你可能有一些打字错误。尤其是你的身份证。你有 "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>

2

0

Joven28 7 年前

问题似乎是html文件中没有包含jquery。这是使用普通js代码的。

function fun_showtextbox()
 {
  var select_status = document.getElementById('select1').value;
 /* select  from select box then show my text box */

  if(select_status == "y")
   {
    document.getElementById('mobileno_textbox').style.display = "block";
   }
     else
   {
    document.getElementById('mobileno_textbox').style.display = "none";   
  }

 }

<!DOCTYPE html>
<html>
<body>

<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>



</body>
</html>