使用 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/

如果我從下拉列表中選擇 select 是，那么它應該將之前的就業字段值顯示為“不適用”。 如果選擇否，則用戶應添加先前的就業值。

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>