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

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

  •  -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>
    推荐文章