javascript - 如何解析弹出框到文本框的值？

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

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

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