Amol Davkhar Amol Davkhar - 3 months ago 11
Javascript Question

Search box placehoder text should change when an option is selected from a drop down list

I have created a drop-down list with this code:

<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 } ?>

So far I am getting this output.

I am trying to change the search box placeholder text per the drop-down list.

The search box looks like this:

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

The placeholder text in the search box should be:
Search Company Admin
when user selects Company Admin from the select box.


You need to attach a change event to the select box. In it you grab the text from the selected option and set the placeholder attribute on the search box.

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

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

jsFiddle example

That said, unless the search box is far removed from the drop down it probably isn't necessary to do this. As long as the drop down is appropriately labeled so its function is clear, it should be obvious that it is limiting your search results to only a certain employee type.