我如何根据从 jQuery 中的 api 收到的值来 select 值？

Question

我有 select 函数，它将根据 API.

显示 selected 值

从 API

读取的值

 "status": "success",
    "result": {
        "fruit_id": 5,
        "fruit_name": Orange,
    }

<select class="form-control mb-3" id="selectFruit">
   <option value="99" hidden> Fruit</option>
   <option value="3">Apple</option>
   <option value="5">Orange</option>
</select>

这是我试过的

const getKnowledgeID = (sId) =>{
        axios.get(`${api}bsl?id=${sId}`)
        .then(function(res){
            //console.log(res);
            if(res.data.status =='success'){
               
                a = res.data.result;

                let cat_type ='';

                if(a.fruit_id == 5){
                    cat_type += `   <select class="form-control mb-3" id="selectFruit">
                                        <option value="99" hidden> Fruit</option>
                                        <option value="3">Apple</option>
                                        <option value="5" selected>Orange</option>
                                    </select>
                                `;
                }
                else{
                    cat_type += ` <select class="form-control mb-3" id="selectFruit">
                                        <option value="99" hidden> Fruit</option>
                                        <option value="3" selected>Apple</option>
                                        <option value="5">Orange</option>
                                    </select>`;
                }


                $('#fruit').append(` 
                          <div class="col-lg-12 md-mb-50">
                                <div class="form-group row">
                                    <div class="col-lg-4">
                                        <label class="form-label"> Fruit Category</label>
                                       ${cat_type}
                                    </div>
                                </div>
                            </div>
                `);
            }
        });
    }

我认为这不是显示 selected 值的好方法。如果我有超过 5 <option> 怎么办？我不想一直重复同样的事情。如何改进此方法以使其更简单？如何显示 id = 5 是基于 API 值的 selected 值？

Answer 1

实现所需内容的快速方法是添加 select 元素而不选择任何内容。然后你可以根据响应中的fruit_id设置它的val()：

const getKnowledgeID = (sId) => {
  axios.get(`${api}bsl?id=${sId}`).then(function(res) {
    if (res.data.status == 'success') {
      $('#fruit').append(`<div class="col-lg-12 md-mb-50"><div class="form-group row"><div class="col-lg-4"><label class="form-label"> Fruit Category</label><select class="form-control mb-3" id="selectFruit"><option value="99" hidden> Fruit</option><option value="3">Apple</option><option value="5">Orange</option></select></div></div></div>`);                              
      $('#selectFruit').val(res.data.result.fruit_id);                          
    }
  });
}

然而，最佳解决方案是在页面加载时让所有 HTML 已经存在于 DOM 中，并在必要时隐藏。当从您的 AJAX 调用收到响应时，显示内容，然后在其上设置 val()。首选此方法，因为它从 JS 中删除了 HTML 代码；理想情况下，应该尽可能少地混合脚本。

我如何根据从 jQuery 中的 api 收到的值来 select 值？

How do I select value based on value received from api in jQuery?

javascript

api

jquery

select