当从下拉列表中选择一个选项时，搜索框placehoder文本应该会更改

Question

我已使用以下代码创建了一个下拉列表：

  <select class="selectpicker" id="select_designatfirst" title="Select Designation">
  <?php foreach ($this->hierarchydisp as $val) { ?>
  <option value="<?php echo $val['hierarchy_id']; ?>" ><?php echo $val['hierarchy_name'] ?></option>
  <?php } ?>
  </select>

到目前为止，我得到了这个输出。

我正在尝试按下拉列表更改搜索框占位符文字。

搜索框如下所示：

   <input type="text" class="form-control" id="empSearch"  placeholder="Search Employees">

当用户从选择框中选择公司管理员时，搜索框中的占位符文字应为：Search Company Admin。

Answer 1

您需要将change事件附加到选择框。在其中grab the text from the selected option，并在搜索框中设置placeholder属性。

var select_designatfirst = $('#select_designatfirst'),
  empSearch = $('#empSearch');

select_designatfirst.on('change', function () {
  empSearch.attr('placeholder', 'Search ' + select_designatfirst.find(':selected').text());
});

jsFiddle example

尽管如此，除非搜索框远离下拉列表，否则可能没有必要这样做。只要下拉列表被适当标记以便其功能清晰，就应该明显将搜索结果限制为仅限某个员工类型。

Answer 2

如果我理解你的问题，你应该在selectbox onchange事件中添加一个事件处理程序，如下所示：

<select onchange="document.getElementById('empSearch').placeholder = this.value" class="selectpicker" id="select_designatfirst" title="Select Designation">
<?php foreach ($this->hierarchydisp as $val) { ?>
<option value="<?php echo $val['hierarchy_id']; ?>" ><?php echo   $val['hierarchy_name'] ?></option>
<?php } ?>
</select>

上面的示例将把下拉列表的值（在您的示例中为id）作为文本框的占位符。如果你想使用文本值，你可以使用这里提到的技术：

Get selected text from a drop-down list (select box) using jQuery