问如何使用json数据使引导程序4下拉
EN

Stack Overflow用户

提问于 2019-02-12 03:28:30

回答 2查看 2.6K关注 0票数 0

我在窗体中有一个带有下拉按钮的输入字段，我试图使该下拉菜单动态地存储值，这里有静态JSON数据，我正在尝试从该数据进行下拉，但它不能正常工作。

数据显示在下拉列表中。
我已经编写了一个代码，其中的下拉列表应该在输入字段中填充。
从下拉方式填充内部输入字段的数据是正确的。
我的代码加载下拉列表是错误的

代码片段

$(".dropdown-item").click(function() {
  $(this).closest(".input-group").find("input").val($(this).text())
});
var data = [{
    "code": "1234",
    "name": "banana"
  },
  {
    "code": "5678",
    "name": "apple"
  },
  {
    "code": "9635",
    "name": "grapes"
  }
]
let dropdown = $('#itemCode');
dropdown.empty();
$.each(data, function(key, entry) {
  dropdown.append($('<a class="dropdown-item"></a>').attr('value', entry.code).text(entry.name));

});
$("#itemCode").on("change", function(e) {
  var selectedOption = this.value;
  alert(selectedOption)
});

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">
  <div class="form-row">
    <hr>
    <div class="form-row">
      <div class="form-group">
        <label for="itemCode">Item Code</label>
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with dropdown button">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu dropdown-menu-right" id="itemCode">

            </div>
          </div>
        </div>
      </div>


      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

在这里，我认为我填充下拉字段的代码是错误的，这就是为什么它不能正常工作的原因。

这里的任何人都请帮帮我

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-12 03:46:17

只是您的click事件位于错误的位置--它永远不会被分配，请将它移到这里：

$.each(data, function(key, entry) {
  dropdown.append( $('<a class="dropdown-item"></a>')
    .attr('value', entry.code).text(entry.name).click(function() {
          $(this).closest(".input-group").find("input").val($(this).text())
     })

);

票数 0

Stack Overflow用户

发布于 2019-02-12 03:40:51

如果您想要做的是在jquery中创建一个下拉列表并将其发送到html标记，那么您可以这样做。

在<div class="dropdown-menu dropdown-menu-right" id="itemCode">内部有一个选择标记，如下所示。

<select class="form-control" data-val="true" id="//ID of dropdown" name="//Whatever"></select>

您的javascript代码将如下所示。我们将简单地标记并将其插入select标记中。

            //Markup for drop down list
            var markup = "<option Value='0'>Select option</option>";

            for (var i = 0; i < result.length; i++) {
                markup += "<option Value=" + result[i].Value + ">" + result[i].Text + "</option>";
            }

            //Populate dropdown with value
            $("#//ID of the Select").html(markup).show();