时间戳

首页 > 解决方案 > 将输入绑定到按钮单击函数的值

javascript - 将输入绑定到按钮单击函数的值

问题描述

我有一个使用 Bootstrap 的 HTML 用户界面，并且有一个下拉菜单和一些输入字段。我想要做的是用下拉菜单选择的值填充输入字段。到目前为止，我还无法绑定到该值并将其显示在输入值字段中。

这是我的代码：

<div id="create-job-pane">
        <div class="container">
          <h2>Create Job</h2>
          <div class="dropdown">
            <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
              Select Job Type to Schedule
              <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li>
                <a href="#"><button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button></a>
              </li>
              <li>
                <a href="#"><button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button></a>
              </li>
              <li>
                <a href="#"><button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button></a>
              </li>
            </ul>
          </div>
        </div>
        <hr />

        <!-- <p id="selection"></p> --> // Works if I populate it here

        <div class="form-group">
          <label>Job name</label>
          <input type="text" class="job-name form-control"> // Bind value here
        </div>
        <div class="form-group">
          <span class="btn btn-default btn-success" data-action="save">Save</span>
          <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
        </div>
      </div>

  // ... other code

  <script>
    function populateJobVal(val) {
      document.getElementById("selection").innerHTML = val;
    }

  </script>

我试过这个：

 <input type="text" class="job-name form-control" value="selection">

还有这个：

 <input type="text" class="job-name form-control" id="selection">

...但它没有绑定到输入字段。

当我的按钮被单击以出现在输入文本框中时，如何获取选择的值？

标签： javascripthtmltwitter-bootstrap

解决方案

只需交换innerHTMLtovalue就可以了。

function populateJobVal(val) {
  console.log(val);
  document.getElementById("selection").value = val;
}
<div id="create-job-pane">
        <div class="container">
            <h2>Create Job</h2>
            <div class="dropdown">
                <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Select Job Type to Schedule
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button></a>
                    </li>
                    <li>
                        <a href="#"><button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button></a>
                    </li>
                    <li>
                        <a href="#"><button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button></a>
                    </li>
                </ul>
            </div>
        </div>
        <hr />

        <div class="form-group">
            <label>Job name</label>
            <input type="text" class="job-name form-control" id="selection"> // Bind value here
        </div>
        <div class="form-group">
            <span class="btn btn-default btn-success" data-action="save">Save</span>
            <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
        </div>
    </div>

推荐阅读