從ajax中選擇選項時下拉另一個輸入欄位出現

嗨，我需要一些幫助，如果我選擇一個下拉選單并從 ajax 選項中選擇并且出現一個隱藏的輸入欄位，我該怎么做？

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

  </div>

  <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>
    </select>
   
  </div>

這是我的ajax

// Here the calling Ajax for the drop down menu below
    $.ajax({
    // 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
    https://ecoexchange.dscloud.me:8080/api/get (production env)

    */
    url:"https://ecoexchange.dscloud.me:8090/api/get",
    // 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
    method:"GET",
    // In this case, we are going to use headers as
    headers:{
        // The query you're planning to call
        // i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
        query:"PriceModeGet()",
        // Gets the apikey from the sessionStorage
        apikey:sessionStorage.getItem("apikey")
    },
    success:function(data,textStatus,xhr) {
        console.log(data);
        for (let option of data) {
            $('#select-price-mode').append($('<option>', {
                value: option.PriceMode,
                text: option.PriceMode
            }));
        }
                                                    },
    error:function(xhr,textStatus,err) {
        console.log(err);
    }
});

這是我的 ajax 回復

[
    {
        "PriceMode": "Price By Recyclables"
    },
    {
        "PriceMode": "Service Charger"
    }
]

哪里說如果我選擇按可回收物定價，隱藏的下拉串列出現我該怎么做？

uj5u.com熱心網友回復：

您可以使用 onchange 事件觸發檢查，如果用戶選擇了您想要的值，則顯示選擇框。您必須使用隱藏道具 ( divToDisplay)向 div 添加一個 id 。

$("#select-price-mode").change(function() {
   if(this.value === "Price By Recyclables") {
       $('#divToDisplay').removeAttr('hidden');
   }
});

uj5u.com熱心網友回復：

只需在首先選擇一個選項時呼叫一個函式 select

const checkPriceMode = () => {
  let value = $('.select-price-mode').val();
  $('.payment-frequency').fadeOut();
  if(value === 'Price By Recyclables') $('.payment-frequency').fadeIn();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="col">
    <label for="select-price-mode" class="col-form-label">Price Mode</label>
    <select onchange="checkPriceMode()" class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
      <option selected disabled value="">Select.....</option>
      <option value="Price By Recyclables">Price By Recyclables</option>
      <option value="Service Charger">Service Charger</option>
    </select>

  </div>

  <div class="col payment-frequency" 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>
    </select>
   
  </div>

uj5u.com熱心網友回復：

我認為這會適合你 xhr https://developer.mozilla.org/ru/docs/Web/HTML/Element/datalist

標籤：javascript html 查询 阿贾克斯 落下

上一篇：我如何解決“無法讀取未定義的屬性（讀取'ownerDocument'）”

下一篇：使表格行隨著類的變化而淡入淡出？