Question

我有一个已经填充的下拉列表。因此，当页面加载时，它必须显示先前选择的值。我从数据库中获得用户选择的值。

这是当前下拉列表

       ```  <select name="Items"  valtype="required" runat="server" id="Items"> 
                        <option value="-1">--Select--</option>  
                        <option value="Milk">Milk</option>
                        <option value="Sugar">Sugar</option>
                        <option value="Coffee">Coffee</option>
                       </select> ```

这是我从数据库读取的代码

function Changed(itemreturned)// pass value from db
{
  var items=$('#Items');
 //what i tried 
items.val=items.innerHTML + '<option value="' + items[0].Items + '">' + itemreturned[0].Items + '</option>';
// second try
item.val=item.options[itemreturned[0].Items];

}

json结果

  itemreturned
{ 
 Items:Milk
}

所以我想做的是，因为返回了“牛奶”，所以我想在项目下拉列表中显示它，而不是“ --select--” 但是我已经在列表中为“牛奶”加载了一个选项，因此我该如何匹配从数据库返回的结果和列表中的项目并显示该特定值。

Answer 1

我相信这就是您想要的方式：

function Changed(itemreturned) // pass value from db
{
  var items = $('#Items');
  items.val(itemreturned.Items);
}

首先使用jQuery的是item.val(yourvalue)而不是item.val = yourvalue。

第二，在您的代码中，您有item.val，而我想item应该是items，因此在编写代码并使用控制台时，您需要使其速度稍慢一些，因此请检查一下错误，因为这将说不存在名为item的东西。

演示

function Changed(itemreturned) // pass value from db
{
  var items = $('#Items');
  items.val(itemreturned.Items);
}

var itemreturned = {
  Items: "Milk"
}

Changed(itemreturned)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Items" valtype="required" runat="server" id="Items">
  <option value="-1">--Select--</option>
  <option value="Milk">Milk</option>
  <option value="Sugar">Sugar</option>
  <option value="Coffee">Coffee</option>
</select>

Answer 2

我相信此代码段将完全满足您的目的。

function Changed(itemreturned) // pass value from db
{
  let selectElm = document.getElementById("Items");
  let options = selectElm.options;

  //looping over all the options and matching with your db values
  //if match is found make that the selected index.
  for (let i = 0; i < options.length; i++) {
    if (options[i].text === itemreturned.Items) {
      selectElm.options.selectedIndex = options[i].index;
    }
  }
}

let itemreturned = {
  Items: "Milk"
}

Changed(itemreturned);

<select name="Items" valtype="required" runat="server" id="Items">
  <option idx=1 value="-1">--Select--</option>
  <option idx=2 value="Milk">Milk</option>
  <option idx=3 value="Sugar">Sugar</option>
  <option idx=4 value="Coffee">Coffee</option>
</select>

您可以更改传入的数据库值并相应地检查是否匹配，如果未找到匹配项，则默认情况下将显示--Select--。 Here's js fiddle link

随时询问您对此是否有疑问。

如何将json中的值显示到下拉列表中

2 个答案: