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

Question

Hi i have a form with some dropdowns and text fields.If i am selecting a value from dropdown the text field value should be changed. In dropdown if i am selecting the value as YES then it should display " Not Applicable" value in text field for ( previous_employment ). If selected NO then it should display the blank text field where user can add their own data.

 $(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>

Here is the Jsfiddle link: https://jsfiddle.net/L2kbjuav/

If i select Yes from the dropdown then it should show the the previous employment field value as " Not Applicable ". If Selected No then the previous employment value should be added by the user.

Answer 1

You can use toggleClass and trigger change on load

 $(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>