тег div не отображается, когда я вызываю его содержимое в jquery - PullRequest
Новая
       3

тег div не отображается, когда я вызываю его содержимое в jquery

0 голосов
/ 04 июля 2018

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   
  }

 }

я не знаю, что я делаю неправильно, но div-контент для id = "mobileno_textbox" не отображается?

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Кажется, проблема в том, что у вас нет jquery, включенного в ваш HTML-файл. Это работает с простым кодом 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>
0 голосов
/ 04 июля 2018

похоже, у вас может быть несколько опечаток. особенно ваш идентификатор. у вас есть "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...