如何使用 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">&nbsp; jQuery(function() {&nbsp; &nbsp; var nationalothers = $('#OthersNationalityInput');&nbsp; &nbsp; if (this.value == 'Others') {&nbsp; &nbsp; &nbsp; nationalothers.show();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; nationalothers.hide();&nbsp; &nbsp; }&nbsp; });&nbsp; jQuery(document).on('change', '#NationalitySelect', function() {&nbsp; &nbsp; var nationalothers = $('#OthersNationalityInput');&nbsp; &nbsp; if (this.value == 'Others') {&nbsp; &nbsp; &nbsp; nationalothers.show();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; nationalothers.hide();&nbsp; &nbsp; }&nbsp; });</script>但是当然你应该通过保持干燥来优化上面的代码。

Answer 2

你可以通过改变这一行来做到这一点<input&nbsp;type="text"&nbsp;style="display:none;"&nbsp;name="others_nationality"&nbsp;class="form-control"&nbsp;id="OthersNationalityInput"&nbsp;value="<?php&nbsp;echo&nbsp;($others_nationality)&nbsp;?>"&nbsp;/>到<input&nbsp;type="text"&nbsp;style="display:<?php&nbsp;echo&nbsp;($nationality=='Others'&nbsp;?&nbsp;'block'&nbsp;:&nbsp;'none');&nbsp;?>"&nbsp;name="others_nationality"&nbsp;class="form-control"&nbsp;id="OthersNationalityInput"&nbsp;value="<?php&nbsp;echo&nbsp;($others_nationality)&nbsp;?>"&nbsp;/>

Answer 3

当您提交页面时，它会被刷新以使其消失。尝试在表单提交时通过 PHP 添加文本框if(isset($_POST['submit'])){&nbsp;&nbsp; echo"<input type='text' val='value from database'/>";}