Question

我已经在自己的网站上自定义了一些编码

有一个选择字段，其中包含以下选项： 1）新加坡人 2）新加坡PR 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

提交页面时，页面会刷新，因此消失。尝试通过PHP在表单提交上添加文本框

if(isset($_POST['submit']))
{ 
  echo"<input type='text' val='value from database'/>";
}

Answer 2

假设提交后刷新页面并维护表单中的值，则可以将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>

但是，您当然应该通过保持DRY来优化上面的代码。

Answer 3

您可以通过更改此行来实现

<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) ?>" />

如何使用jQuery应用条件逻辑

3 个答案: