Question

我目前正在开发一个系统。我在这个模块中有一个名为＆＃34; Request Certificate＆＃34;的模块;用户将在提供的4个证书（证书1等）中进行选择，然后在提交之前需要填写字段。但是有一个情节扭曲，根据所选证书，字段会有所不同。

示例：我选择证书1，将显示的字段是：名称，年龄。如果我选择证书2，将显示的字段是：姓名，年龄和年份等。

在我的管理员方面，会有一个＆＃34;申请证书＆＃34;在我身边吧。在这里，管理员可以查看为证书请求的所有用户，然后打印它（使用window.print打印）

注意：我使用下拉列表显示4个证书。现在，我已经完成了第一和第二证书，但是当我选择第三和第四证书时，这些字段没有显示。

问题：如何创建动态隐藏和显示字段取决于所选的下拉列表？

查看

bool

脚本

<select class="form-control" id="certificate" name="certificate">
  <option value="CertificateOne">Certificate 1</option>
  <option value="CertificateTwo">Certificate 2</option>                     
</select>

<div class="cert_select" id="CertificateTwo">
  <div class="col-xs-12">  
    <div class="form-group">
    <hr>
    <h4> Certificate</h4>
      <div class="col-xs-3">
      <label>First Name</label>
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
      <div class="text-danger" id="fname_error"></div>
    </div>
    <div class="col-xs-3">
      <label>Middle Name</label>
      <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
      <div class="text-danger" id="mname_error"></div>
    </div>
    <div class="col-xs-3">
      <label>Last Name</label>
      <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
      <div class="text-danger" id="lname_error"></div>
    </div>
</div>

我也试过这个

查看

 $(document).ready(function(){
   $('.cert_select').hide();

   $('#certificate').change(function(){
    $('.cert_select').hide();

    $('#' + $(this).val()).show();
  });
 });

它只显示第一个证书，而字段没有显示

Answer 1

您忘记了2个div闭包，一个用于.cert_select，另一个用于.col-xs-12。

<select class="form-control" id="certificate" name="certificate">
  <option value="CertificateOne">Certificate 1</option>
  <option value="CertificateTwo">Certificate 2</option>    
  <option value="CertificateThree">Certificate 3</option>
  <option value="CertificateFour">Certificate 4</option>
</select>
<div class="cert_select" id="CertificateOne">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 1</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateTwo">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 2</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateThree">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 3</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateFour">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 4</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

使用jQuery的JS部分：

$(document).ready(function(){
        $('.cert_select').hide();

    $('#certificate').change(function(){
    $('.cert_select').hide();
    $('#' + $(this).val()).show();
  });
 });

这是一个包含4个证书的jsfiddle： https://jsfiddle.net/Lqq8ucep/

使用选择选项（Codeigniter）进行动态隐藏和显示字段

1 个答案: