如何使用jQuery应用条件逻辑

Question

I have customized some coding in my site

There is a select field which has options: 1) singaporean 2) singapore PR 3) others

once user select others, a text field will appear below for the user to key in any nationality user want to key in

The problem here is that I have managed to get the text field to appear but after press "save settings" button, the text field disappears but the data is saved.

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

I want the text field to remain shown after the button "save settings" is pressed.

Answer 1

When you submit the page get refreshed so it disappears. Try to add the textbox by PHP on form submit

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

Answer 2

Assuming after you submit then the page refreshed and the values in your form are maintained, you can modify your jQuery to this:

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

But of course you should optimize the code above by keeping things DRY.

Answer 3

you can do it by changing this line

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

to

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