Javascript 如何将值从popover解析为textbox？

我想将弹出框中下拉框中的值解析为输入文本。我可以使其弹出，但无法插入选定的值。出于某些原因，我不需要在弹出窗口中选择

HTML

<div class="container">
  <h3>Choose your option</h3>
  <input type="text" class="form-control" id="input" data-placement="auto" data-toggle="popover">
</div>

<div id="popover-content" class="hide">
  <div class="input-group">
    <select class="form-control" id="select">
      <option>one</option>
      <option>two</option>
      option>
    </select>
    <a href="#" id="optBtn" class="btn btn-primary input-group-addon">OK</a>
  </div>
</div>

---

在这里摆弄：

您以错误的方式绑定了元素。试试这个-

$(document).on('click','#optBtn',function() {//can be hide after select
    var selectVar = $('#select').find('option:selected').val();
    alert(selectVar)
    $('#input').val(selectVar);
})

---

您以错误的方式绑定了元素。试试这个-

$(document).on('click','#optBtn',function() {//can be hide after select
    var selectVar = $('#select').find('option:selected').val();
    alert(selectVar)
    $('#input').val(selectVar);
})

---

嗨，你可以试试这个

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  }
}).parent().delegate('#optBtn', 'click', function() {
    var selectVar = $('#select').val();
     $('#input').val(selectVar);
     alert(selectVar);
}); 

---

嗨，你可以试试这个

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  }
}).parent().delegate('#optBtn', 'click', function() {
    var selectVar = $('#select').val();
     $('#input').val(selectVar);
     alert(selectVar);
}); 

---

感谢@nikhil_gandhi和@PhaniKumarM的帮助。最终代码如下：

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  }
});
$(document).on('click','#optBtn',function() {//can be hide after select
    var selectVar = $('#select').find('option:selected').val();
    $('#input').val(selectVar);
    $('.popover').hide();
})

---

感谢@nikhil_gandhi和@PhaniKumarM的帮助。最终代码如下：

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  }
});
$(document).on('click','#optBtn',function() {//can be hide after select
    var selectVar = $('#select').find('option:selected').val();
    $('#input').val(selectVar);
    $('.popover').hide();
})

---

注意，

var-selectVar=$（“#select”）.val（）

在这里可以很好地工作。@nikhil_-gandhi是的，这很好！点击按钮后如何隐藏popover？我“尝试”了“$”（“#popover内容”）.hide（）；”但它不起作用。=>我想你得手动打开popover。检查这个-您可以使用

$（'.popover'）.hide（）

隐藏弹出窗口。@Wilf如果我的评论对你有帮助，那么你可以上传我的评论。注意

var-selectVar=$（'#select'）。val（）

在这里可以正常工作。@nikhil_-gandhi是的，这很好！点击按钮后如何隐藏popover？我“尝试”了“$”（“#popover内容”）.hide（）；”但它不起作用。=>我想你得手动打开popover。检查这个-您可以使用

$（'.popover'）.hide（）

隐藏弹出窗口。@Wilf如果我的评论对您有帮助，您可以向上投票我的评论。