Question

我有一个带有输入字段的bootstrap $下拉列表，我正在尝试打印或提醒所选的下拉列表，但没有成功

代码段

$("#gstCodeDropdown").on("click", function(e) {
  alert($(this).val());
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
  <label for="gstCodeInput">GST Code</label>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="gstCodeInput">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false"></button>
      <div class="dropdown-menu dropdown-menu-right" id="gstCodeDropdown">
        <a class="dropdown-item" href="#">gst Code 1</a>
        <a class="dropdown-item" href="#">gst Code 2</a>
        <a class="dropdown-item" href="#">gst Code 3</a>
      </div>
    </div>
  </div>
</div>

我在这里很好地执行了代码，但是它并没有给出我想要得到的期望输出

Answer 1

您在做什么是错误的。您正在尝试获取div的value属性。

/* $("#gstCodeDropdown").on("click", function(e) {
  alert($(this).val());
}); */

function getCode(obj) {
  alert(obj.innerHTML);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
  <label for="gstCodeInput">GST Code</label>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="gstCodeInput">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false"></button>
      <div class="dropdown-menu dropdown-menu-right" id="gstCodeDropdown">
        <a class="dropdown-item" href="#" onClick="getCode(this);">gst Code 1</a>
        <a class="dropdown-item" href="#" onClick="getCode(this);">gst Code 2</a>
        <a class="dropdown-item" href="#" onClick="getCode(this);">gst Code 3</a>
      </div>
    </div>
  </div>
</div>

Answer 2

您需要获取文本内容，而不是执行$('#jLogEntryTable').DataTable().fnDestroy()。这是因为val没有值属性。

此示例显示如何获取单击的锚点链接的文本并将其分配给输入。您可以根据需要从定位标记中获取其他任何属性

div

$("#gstCodeDropdown").on("click", '.dropdown-item', function(e) {
  alert($(this).text().trim())
  $('#gstCodeInput').val(($(this).text().trim()));
});

Answer 3

尝试一下

   $(".dropdown-item").click(function() {
        console.log($(this)[0].text)
    });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
  <label for="gstCodeInput">GST Code</label>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button" id="gstCodeInput">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false"></button>
      <div class="dropdown-menu dropdown-menu-right" id="gstCodeDropdown">
        <a class="dropdown-item" href="#">gst Code 1</a>
        <a class="dropdown-item" href="#">gst Code 2</a>
        <a class="dropdown-item" href="#">gst Code 3</a>
      </div>
    </div>
  </div>
</div>

如何在控制台上打印引导下拉菜单？

3 个答案: