Ajax Combo box with `Please Wait` label For Loading Data

Question

How Can I Have a Please wait.. or Loding... label For Loding Data Time below of my Combo box?

I Want, When Switch Between Male And Female, see Loading... under Switch box

HTML

<body>
    <form>
      <select name="users" id="users">
        <option value="">Select a person:</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
      </select>
      <button type="submit" id="for-male" styl>Male</button>
      <button type="submit" id="for-female">Female</button>
    </form> <br>
    <div id="txtHint"><b>Person info will be listed here.</b>
    </div>
</body>

The javascript will look like this

$(document).ready(function() {
    $('#users').on('change', function() {
    $('#for-male, #for-female').hide()
    var value = $(this).val()
    if(value == "1") {
        $('#for-male').show();
    } else {
        $('#for-female').show();
    }

  });
});

and the css will be

#for-male, #for-female{
  display:none;
}

Possible duplicate of [Show "Loading..." in dropdown box](http://stackoverflow.com/questions/1120920/show-loading-in-dropdown-box) — Nir O., Mar 04 '17 at 08:45

Ismail Farooq · Accepted Answer · 2017-04-12T15:43:48.350

$(document).ready(function() {
  //save actual text
  var text = $('#test').html();
  
  $('#users').on('change', function() {
    $('#for-male, #for-female').hide()
    var value = $(this).val()
    if (value == "1") {
      $('#for-male').show();
    } else {
      $('#for-female').show();
    }
    //change text to loading
    $('#test').html('Loading...');
    
    //this is demo code for testing, here you will call your ajax function
    setTimeout(function(){
      //change back to orignal text
      $('#test').html(text);
    }, 1000);

  });

  
});

#for-male, #for-female{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <select name="users" id="users">
        <option value="">Select a person:</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
      </select>
  <button type="submit" id="for-male" styl>Male</button>
  <button type="submit" id="for-female">Female</button>
 <br>
<div id="txtHint"><b id="test">Person info will be listed here.</b>
</div>

I Want, When Switch Between Male And Female, see `Loading... ` in place of `Person info will be listed here.`, I Mean `Person info will be listed here.` Change to Loading.... — Saeed Heidarizarei, Apr 12 '17 at 12:03
I Want, When Switch Between Male And Female, see Loading... under Switch box — Saeed Heidarizarei, Apr 12 '17 at 15:31

Ajax Combo box with `Please Wait` label For Loading Data

1 Answers1

Linked