显示从 API 中选择的下拉框项目价格

Question

我想达到什么目的？？

我想使用 API 显示从下拉框中选择的每个项目的价格。我尝试使用点击事件，但现在对我来说太难了，因为我是初学者。当我们选择一个选项时，有人可以帮我在表单左下角的下拉框中显示所选项目的价格吗？

const apiData =[
  {
      "id":"1",
      "question" :"Love",
      "price":"90"
  },
  {
      "id":2,
      "question":"Carrer",
      "price":"80"
  },
  {
      "id":"3",
      "question":"Shadi",
      "price":"100"
  },
  {
      "id":"4",
      "question":"Future",
      "price":"200"
  },
  {
      "id":"5",
      "question":"Office",
      "price":"300"
  },
  {
      "id":"6",
      "question":"After-Life",
      "price":"400"
  }
]


//Js Code for diplaying items in drop box (working prefectly fine)
async function loadUsers() {
  //const response = await fetch("../reference_json/questions_API.js");
  //return response.json();
  return apiData
}

document.addEventListener("DOMContentLoaded", async () => {
  try {
    const users = await loadUsers();
    const divContainer = document.getElementById('question');
    users.forEach(user => {
      const paragraphElem = document.createElement('option');
      paragraphElem.innerText = `${user.question}`;
      divContainer.appendChild(paragraphElem);
    });
  } catch (e) {
    console.log('ERROR');
    console.log(e);
  }
});

<form class ="choose-form">
        
        
  <div class="mb-3">
    <select  class="form-select" id ="question">
      <option>Select a category : Love,carrer,more ...</option> 
    </select>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light">   
    <span> ₹99(including GST)</span>
    <span>Ideas what to ask</span>
    <div class="profile-icon" style="justify-content-end">
      <button type="submit" class="btn btn-warning">Ask a Question </button>
    </div>
  </nav>
</form>

Answer 1

const apiData =[
  {
      "id":"1",
      "question" :"Love",
      "price":"90"
  },
  {
      "id":2,
      "question":"Carrer",
      "price":"80"
  },
  {
      "id":"3",
      "question":"Shadi",
      "price":"100"
  },
  {
      "id":"4",
      "question":"Future",
      "price":"200"
  },
  {
      "id":"5",
      "question":"Office",
      "price":"300"
  },
  {
      "id":"6",
      "question":"After-Life",
      "price":"400"
  }
]


//Js Code for diplaying items in drop box (working prefectly fine)
async function loadUsers() {
  //const response = await fetch("../reference_json/questions_API.js");
  //return response.json();
  return apiData
}

document.addEventListener("DOMContentLoaded", async () => {
  try {
  
    const users = await loadUsers();
    const oSel = document.querySelector('select[name="question"]');
    
    users.forEach(user => {
      let option=new Option( user.question, user.id );
          option.dataset.price=user.price;
      oSel.appendChild( option );
    });
    
    oSel.addEventListener('change',function(e){
      let selection=this.options[this.options.selectedIndex];
      document.querySelector('nav.navbar > span:nth-of-type(2)').innerText=[
        selection.dataset.price,
        selection.text
      ].join(' ');
    });
    
  } catch (e) {
    console.log(e);
  }
});

<form class="choose-form">
        
        
  <div class="mb-3">
    <select  class="form-select" id="question" name='question'>
      <option>Select a category : Love, carrer, more ...
    </select>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light">   
    <span> ₹99(including GST)</span>
    <span>Ideas what to ask</span>
    <div class="profile-icon" style="justify-content-end">
      <button type="submit" class="btn btn-warning">Ask a Question </button>
    </div>
  </nav>
  
</form>

Answer 2

由于您从 ajax 调用数据，因此您必须在从服务器加载数据时保存所有需要的值，然后在 select 元素上绑定 onchange 事件，然后将所选选项中的值打印到您的 span

下面是更正后的代码

const apiData =[
{
    "id":"1",
    "question" :"Love",
    "price":"90"
},
{
    "id":2,
    "question":"Carrer",
    "price":"80"
},
{
    "id":"3",
    "question":"Shadi",
    "price":"100"
},
{
    "id":"4",
    "question":"Future",
    "price":"200"
},
{
    "id":"5",
    "question":"Office",
    "price":"300"
},
{
    "id":"6",
    "question":"After-Life",
    "price":"400"
}
]


//Js Code for diplaying items in drop box (working prefectly fine)
async function loadUsers() {
//const response = await fetch("../reference_json/questions_API.js");
//return response.json();
return apiData
}

document.addEventListener("DOMContentLoaded", async () => {
try {
  const users = await loadUsers();
  const divContainer = document.getElementById('question');
  users.forEach(user => {
    const paragraphElem = document.createElement('option');
    paragraphElem.innerText = `${user.question}`;
    // edited line saving matching data to option
    paragraphElem.data = user
    divContainer.appendChild(paragraphElem);
  });
} catch (e) {
  console.log('ERROR');
  console.log(e);
}
});

// edited line
var select = document.querySelector("#question"),
  priceEl = document.querySelector(".priceShow")
select.onchange = function(){
    var selected = select[select.selectedIndex],
        value = typeof selected.data != "undefined" ? selected.data.price:null
    if(value){priceEl.innerText = `₹${value}(including GST)`}
}

<form class ="choose-form">
    <div class="mb-3">
      <select  class="form-select" id ="question">
        <option>Select a category : Love,carrer,more ...</option> 
      </select>
    </div>

    <nav class="navbar navbar-expand-lg navbar-light">   
    <!-- edited line -->
      <span class="priceShow"> ₹99(including GST)</span>
      <span>Ideas what to ask</span>
      <div class="profile-icon" style="justify-content-end">
        <button type="submit" class="btn btn-warning">Ask a Question </button>
      </div>
    </nav>
 </form>