如何使用 jquery 应用条件逻辑

Question

我在我的网站中自定义了一些编码有一个选择字段，其中包含以下选项：1) 新加坡 2) 新加坡公关 3) 其他一旦用户选择其他人，下方将出现一个文本字段供用户输入用户想要输入的任何国籍这里的问题是我已经设法让文本字段出现，但在按下“保存设置”按钮后，文本字段消失但数据被保存。<li class="jobsearch-column-6">  <label><?php esc_html_e('Nationality', 'wp-jobsearch') ?></label>  <div class="jobsearch-profile-select">    <label for="NationalitySelect">      <select name="nationality" id="NationalitySelect" class="selectize-select" placeholder="<?php esc_html_e('Nationality', 'wp-jobsearch') ?>">    </label>    <option <?php echo ($nationality=='Singaporean' ? 'selected="selected"' : '') ?>value="Singaporean">      <?php esc_html_e('Singaporean', 'wp-jobsearch') ?>    </option>    <option <?php echo ($nationality=='Singaporean PR' ? 'selected="selected"' : '') ?> value="Singaporean PR">      <?php  esc_html_e('Singaporean PR', 'wp-jobsearch') ?>    </option>    <option <?php echo ($nationality=='Others' ? 'selected="selected"' : '') ?>value="Others">      <?php esc_html_e('Others', 'wp-jobsearch') ?>    </option>    </select>    <input type="text" style="display:none;" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />  </div></li><script type="text/javascript">  jQuery(document).on('change', '#NationalitySelect', function() {    var nationalothers = $('#OthersNationalityInput');    if (this.value == 'Others') {      nationalothers.show();    } else {      nationalothers.hide();    }  });</script>我希望文本字段在按下“保存设置”按钮后保持显示。

Answer 1

假设在您提交之后页面刷新并且表单中的值被维护，您可以将您的 jQuery 修改为：

<script type="text/javascript">

  jQuery(function() {

    var nationalothers = $('#OthersNationalityInput');

    if (this.value == 'Others') {

      nationalothers.show();

    } else {

      nationalothers.hide();

    }

  });

  jQuery(document).on('change', '#NationalitySelect', function() {

    var nationalothers = $('#OthersNationalityInput');

    if (this.value == 'Others') {

      nationalothers.show();

    } else {

      nationalothers.hide();

    }

  });

</script>

但是当然你应该通过保持干燥来优化上面的代码。

Answer 2

你可以通过改变这一行来做到这一点

<input type="text" style="display:none;" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />

到

<input type="text" style="display:<?php echo ($nationality=='Others' ? 'block' : 'none'); ?>" name="others_nationality" class="form-control" id="OthersNationalityInput" value="<?php echo ($others_nationality) ?>" />

Answer 3

当您提交页面时，它会被刷新以使其消失。尝试在表单提交时通过 PHP 添加文本框

if(isset($_POST['submit']))

{ 

  echo"<input type='text' val='value from database'/>";

}