如何将值从弹出框解析到文本框？答案

【问题标题】：How to parse value from popover to textbox?如何将值从弹出框解析到文本框？
【发布时间】：2017-08-30 04:15:20
【问题描述】：

我想将弹出框内下拉框中的值解析为输入文本。我可以让它弹出但不能插入选定的值。由于某些原因，我不需要在弹出窗口中进行选择。

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>

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

在这里提琴：https://jsfiddle.net/723exh1g/3/

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

注意var selectVar = $('#select').val() 在这里可以正常工作。
@nikhil_gandhi 是的，它正在醒来！单击按钮后如何隐藏弹出框？我试过 '$('#popover-content').hide();'但它不起作用。 => jsfiddle.net/723exh1g/6
我认为您必须手动打开弹出窗口。看看这个 - stackoverflow.com/questions/19974559/…
您可以使用$('.popover').hide(); 隐藏弹出窗口。
@Wilf 如果我的评论对您有帮助，那么您可以点赞我的评论。

【解决方案2】：

你好，你可以试试这个。

$("[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);
});

【讨论】：

【解决方案3】：

感谢@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();
})

https://jsfiddle.net/723exh1g/17/

【讨论】：