加载预选选项时隐藏和显示表单元素

Question

我有这个 jQuery 来显示和隐藏表单域。我先把它们藏起来

$('#edit-profile-letter-of-introduction-field-sign-off').hide();
$('#edit-profile-letter-of-introduction-field-signatory').hide();
$('#edit-profile-letter-of-introduction-field-position').hide();

然后我有一个根据 select 字段的值显示和隐藏它们的更改事件

$('#edit-profile-letter-of-introduction-field-template-und').change(function() {
  switch ($(this).val()) {
   case '1':
   $('#edit-profile-letter-of-introduction-field-sign-off').show();
   $('#edit-profile-letter-of-introduction-field-signatory').hide();
   $('#edit-profile-letter-of-introduction-field-position').hide();
   break;

   etc etc

工作正常。然后我保存表格。当表单returns时，所有字段再次隐藏。

我想要发生的是当一个表单被加载时，并且 select 字段中已经有一个 selection - 或者当 select 字段具有默认值时- 然后我希望隐藏或显示其他表单字段但不需要更改事件。

然后我希望更改事件在用户更改 select 字段的值时起作用。

Answer 1

请参考下面的代码示例。在下面的示例中，我正在加载默认值 "test" 的输入，因此第一种情况将在加载时执行。然后，如果您将输入更改为 "test1"，那么它将执行第二种情况。同样，您可以添加更多案例。

<input type="text" id="demoInput" value="test">
<lable id="lbl">test</lable>
<lable id="lbl1">test1</lable>
<lable id="lbl2">test2</lable>



$(document).ready(function(){
 var defaultValue = $("#demoInput").val();
 hideShowElements(defaultValue);
  $("#demoInput").change(function(){   
    hideShowElements($(this).val());
  });
});
function hideShowElements(defaultValue){
  switch (defaultValue) {
   case 'test':
    $("#lbl").show();
    $("#lbl1").hide();
    $("#lbl2").hide();
   break;
   case "test1":
   $("#lbl").hide()
    $("#lbl1").show();
    $("#lbl2").show();
   break;
   };
 }

加载预选选项时隐藏和显示表单元素

Hide and show form elements when preselected option is loaded

jquery

show

hide