Question

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

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>

JS

$("[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/

Answer 1

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

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

Answer 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);
});

Answer 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/

如何解析popover到textbox的值？

3 个答案: