Show/Hide from Select with Value Coming from Database

Question

I've got show/hide working great depending on the value chosen from a select

$( document ).ready( function () {
   $("#fac_name").change(function() {
     var value = this.value;
     if (value == "other") {
      $("#otherFAC").show( "slow" );
     } else {
      $("#otherFAC").hide( "slow" ); 
            }
        } );
    } );

Where I'm having my problem - the value can also be set coming directly from the database...

<?php
    if ( $p['foo'] == 'foo' ) {
     echo 'selected="selected"';
   }
?>

I'm missing whatever I need to get the value when the document loads and go ahead and set the show/hide ...

I've got this working for all my radio buttons by adding:

$( '[name="travel_comp_num"]:checked' ).trigger( 'click' );

.... but I can't seem to get this to translate to my selects. Need a little assistance please...

score 0 · Answer 1 · edited May 23 '17 at 11:45

Since you already handling the dropdown change event, all you need is an additional part to set the selected option on page load.

So avoid hard-coding the option attribute (remove it):

<?php
  if ( $p['foo'] == 'foo' ) {
    echo 'selected="selected"';
  }
?>

And amend this part to change the select value on page load:

var facNameInitialValue = "<?= $p['foo'] ?>";
$("#fac_name").change(function() {
  $("#otherFAC").toggle(this.value == "other");
})
.val(facNameInitialValue);

score 0 · Answer 2 · answered Dec 20 '16 at 23:53

One solution would be to hide the #otherFAC element by default, and invoke the hide/show function on page load, in addition to binding it to the change event (in my answer I called this function hideOrShow()).

Since hideOrShow() is called outside the event handler, this.value must be changed to $('#fac_name'). Alternatively, this.value could remain, but hideOrShow() must then be invoked using the .call() method to set this to the select#fac_name element.

Try setting a different element to selected in this snippet, and you will see that it has the desired behavior.

Hope this helps.

$( document ).ready( function () {
  
  function hideOrShow(){
    var value = $('#fac_name').val();
    //var value = this.value;
    if (value == "other") {
      $("#otherFAC").show('slow');
    } else {
      $("#otherFAC").hide('slow'); 
    }
  }
  
  $("#fac_name").change(hideOrShow);
  
  hideOrShow();
  // hideOrShow.call($('#fac_name')[0]);
});

#otherFAC {
  display:none;
}

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<select id="fac_name">
  <option value="1" selected>Name1</option>
  <option value="2">Name1</option>
  <option value="other">other</option>
</select>

<div id="otherFAC">I should be hidden when page loads if 'other' is not selected when the page loads</div>

score 0 · Answer 3 · answered Dec 20 '16 at 23:54

A php solution would be to just add a class on the same acted on an element that hides it:

<select name="something1" id="fac_name" class="selectObserver" data-acton='#otherFAC'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="other" <?php
    if($isToggled = $p['foo'] == 'foo') {
     echo 'selected="selected"';
   }
?>>Other</option>
</select>
<div id="otherFAC" <?php if($isToggled) echo ' class="hideOnLoad"' ?>>Something 1</div>

Show/Hide from Select with Value Coming from Database

3 Answers3