Skip to content

Drop down when select the option from ajax another input field appear

Hi i needed some help where if i select a drop down and select from ajax option and a hidden input field appear how can i do it ?

<div class="form-row">
  <div class="col">
    <label for="select-price-mode" class="col-form-label">Price Mode</label>
    <select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
      <option selected disabled value="">Select ....</option>


  <div class="col" hidden>
    <label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
    <select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
      <option selected disabled value="">Select ....</option>

This is my ajax

// Here the calling Ajax for the drop down menu below
    // The url that you're going to post

    This is the url that you're going to put to call the
    backend api,
    in this case, it's (production env)

    // The HTTP method that you're planning to use
    // i.e. GET, POST, PUT, DELETE
    // In this case it's a get method, so we'll use GET
    // In this case, we are going to use headers as
        // The query you're planning to call
        // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
        // Gets the apikey from the sessionStorage
    success:function(data,textStatus,xhr) {
        for (let option of data) {
            $('#select-price-mode').append($('<option>', {
                value: option.PriceMode,
                text: option.PriceMode
    error:function(xhr,textStatus,err) {

and this is my ajax response

        "PriceMode": "Price By Recyclables"
        "PriceMode": "Service Charger"

Where say if i select Price By Recyclables the hidden drop down list appear how can i do it ?


You can use the onchange event to trigger a check and if the user selected the value you want, then display the selectbox. You’d have to add an id to the div with the hidden prop (divToDisplay).

$("#select-price-mode").change(function() {
   if(this.value === "Price By Recyclables") {