javascript - 选择下拉值使用 jquery 更改文本字段值

Question

嗨，我有一个带有一些下拉列表和文本字段的表单。如果我从下拉列表中选择一个值，则应该更改文本字段值。在下拉列表中，如果我将值选择为“是”，那么它应该在（previous_employment）的文本字段中显示“不适用”值。如果选择否，则应显示空白文本字段，用户可以在其中添加自己的数据。

$(document).on("change", "#full_part_time", function() {
  var full_part_time = $(this).val();

  if (full_part_time == "yes") {
    $(".dropdownselection").addClass("hidden");
    $("#full_part_time_details").removeClass("hidden");
  } else {
    $(".dropdownselection").removeClass("hidden");
    $("#full_part_time_details").addClass("hidden");
  }
});
$(document).ready(function() {
  var full_part_time = $("#full_part_time").val();
  if (full_part_time == "yes") {
    $(".dropdownselection").addClass("hidden");
    $("#full_part_time_details").removeClass("hidden");
  } else {
    $(".dropdownselection").removeClass("hidden");
    $("#full_part_time_details").addClass("hidden");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="full_part_time" class="col-sm-12 control-label" style="text-align:left;">49. I do hereby declare that  I am not in full/Part time employment/service not Engaged in any trade/business or profession either previous or at present. </label>
  <div class="col-sm-12">
    <select name="full_part_time" id="full_part_time">
      <option value="no">no</option>
      <option value="yes">yes</option>
    </select>
    <input type="text" class="hidden" id="full_part_time_details" value=" NOT EMPLOYED ANYWHERE " readonly/>
    <div class="dropdownselection ">
      <p>After my retirement, I am not in full or part time employment or Service not engaged in any trade or business or profession till today.</p>
      <p>Service Candidates shall upload following documents along with service Affidavit. </p>
      <ul style="list-style:none;">
        <li>1. Retirement Order / Service Certificate.</li>
        <li>2. Permission Letter from Employer</li>
        <li>3. Proof of working during study period of LAW</li>
        <li>4. Law T.C.</li>
      </ul>
    </div>
  </div>
</div>

<div class="form-group">
  <label for="previous_employment" class="col-sm-12 control-label" style="text-align:left;">50. Give Particulars of your previous employment or service or trade or business or Profession as under ( enclose necessary proof).</label>
  <div class="col-sm-12">
    <input type="text" value="Not Applied" name="previous_employment" id="previous_employment" placeholder="Enter your previous employment details">
  </div>
</div>

这是 Jsfiddle 链接：https ://jsfiddle.net/L2kbjuav/

如果我从下拉列表中选择是，那么它应该将之前的就业字段值显示为“不适用”。如果选择否，则用户应添加先前的就业值。

标签： javascriptphphtmljquery

Answer 1

您可以使用 toggleClass 并在加载时触发更改

$(function() {
  $("#full_part_time").on("change", function() {
    const full = this.value === "yes"
    $(".dropdownselection").toggleClass("hidden", full);
    $("#full_part_time_details").toggleClass("hidden", !full);
    
    $("#previous_employment").val(full ? "NOT APPLICABLE" : "")
    
  }).trigger("change")
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="full_part_time" class="col-sm-12 control-label" style="text-align:left;">49. I do hereby declare that  I am not in full/Part time employment/service not Engaged in any trade/business or profession either previous or at present. </label>
  <div class="col-sm-12">
    <select id="full_part_time" name="full_part_time">
      <option value="">Please select</option>
      <option value="no" selected>no</option>
      <option value="yes">yes</option>
    </select>
    <input type="radio" name="full_part_time" value "no" id="parttime" />
    <input type="text" class="hidden" id="full_part_time_details" value=" NOT EMPLOYED ANYWHERE " readonly/>
    <div class="dropdownselection hidden">
      <p>After my retirement, I am not in full or part time employment or Service not engaged in any trade or business or profession till today.</p>
      <p>Service Candidates shall upload following documents along with service Affidavit. </p>
      <ul style="list-style:none;">
        <li>1. Retirement Order / Service Certificate.</li>
        <li>2. Permission Letter from Employer</li>
        <li>3. Proof of working during study period of LAW</li>
        <li>4. Law T.C.</li>
      </ul>
    </div>
  </div>
</div>

<div class="form-group">
  <label for="previous_employment" class="col-sm-12 control-label" style="text-align:left;">50. Give Particulars of your previous employment or service or trade or business or Profession as under ( enclose necessary proof).</label>
  <div class="col-sm-12">
    <input type="text" value="Prev Emp" name="previous_employment" id="previous_employment" placeholder="Enter your previous employment details">
  </div>
</div>