根据单击按钮在选择选项下显示输入字段

Question

此代码仍无效。我的要求是根据点击按钮在选择选项/下拉列表下显示输入字段。

＆＃13;

＆＃13;

$(document).on("click", ".btneditsec1_2", function (e) {
    e.preventDefault();
    var _self = $(this);
    var myacc = _self.data('acc');
    var mywacc = _self.data('wacc');
    var myitc = _self.data('itc');
        $('#id_accreditation').val(myacc);
        $("#id_w_accreditation").val(mywacc);
        $("#id_issue_the_certificate").val(myitc);
    }); 


  $('select[name=accreditation]').on('change', function() {
    if (this.value == 'Y') {
      $("#accr").show();
    } else {
      $("#accr").hide();
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
 <br>
<div align="right" style="margin-right: 30px;">
  <button id="btneditsec1_2" 
          type="button" 
          class="btn btn-warning btn-sm btneditsec1_2"
          data-acc="Y"
          data-wacc="Accreditation A"
          data-itc="Mr. Jones">
    <span class="glyphicon glyphicon-tasks"></span> Edit Section 1.2</button>
</div>

<table>
  <tr>
    <td>
      <label>Has the management / building achieve any accreditation ?</label>
      <br/>
      <select name="accreditation" id="id_accreditation" class="form-control" title="Please Select">
        <option selected></option>
        <option value="Y">has achieved</option>
        <option value="N">hasn't achieved</option>
      </select>
    </td>
    </tr>
    <tr>
    <td>
      <div id="accr" class="form-group" style="display: none;">
        <label>What Accreditation :</label>
        <input type="text" class="form-control input-sm" id="id_w_accreditation" name="w_accreditation"/><br/>
        <label>Who issue the certificate :</label>
       <input type="text" class="form-control input-sm" id="id_issue_the_certificate" name="issue_the_certificate" /><br>
      </div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

在那里，输入文本w_accreditation和issue_the_certificate仍未显示单击按钮编辑部分1.2  请帮帮我..

Answer 1

我猜您需要根据data-acc="Y"中的值自动显示文本字段。如果我错了，请纠正我。 根据这一点，您只需在设置其值后触发change框的select事件，如下所示：

＆＃13;

＆＃13;

$(document).on("click", ".btneditsec1_2", function (e) {
    e.preventDefault();
    var _self = $(this);
    var myacc = _self.data('acc');
    var mywacc = _self.data('wacc');
    var myitc = _self.data('itc');
        $('#id_accreditation').val(myacc).change(); //trigger the change event so that associated event handler will get called
        $("#id_w_accreditation").val(mywacc);
        $("#id_issue_the_certificate").val(myitc);
    }); 


  $('select[name=accreditation]').on('change', function() {
    if (this.value == 'Y') {
      $("#accr").show();
    } else {
      $("#accr").hide();
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
 <br>
<div align="right" style="margin-right: 30px;">
  <button id="btneditsec1_2" 
          type="button" 
          class="btn btn-warning btn-sm btneditsec1_2"
          data-acc="Y"
          data-wacc="Accreditation A"
          data-itc="Mr. Jones">
    <span class="glyphicon glyphicon-tasks"></span> Edit Section 1.2</button>
</div>

<table>
  <tr>
    <td>
      <label>Has the management / building achieve any accreditation ?</label>
      <br/>
      <select name="accreditation" id="id_accreditation" class="form-control" title="Please Select">
        <option selected></option>
        <option value="Y">has achieved</option>
        <option value="N">hasn't achieved</option>
      </select>
    </td>
    </tr>
    <tr>
    <td>
      <div id="accr" class="form-group" style="display: none;">
        <label>What Accreditation :</label>
        <input type="text" class="form-control input-sm" id="id_w_accreditation" name="w_accreditation"/><br/>
        <label>Who issue the certificate :</label>
       <input type="text" class="form-control input-sm" id="id_issue_the_certificate" name="issue_the_certificate" /><br>
      </div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;