Remove placeholder when active selected items

[Timwillems]

trafficstars

Whenever there is an item selected in the "multiple" dropdown, i'd like to have the placeholder option removed from the list.

This is to have a indicator like "Please select your ...."

Now it always shows this placeholder, even if there are selected items

[ggsp]

You can achieve this with CSS, e.g.:

.choices__list--multiple:not(:empty) + .choices__input::placeholder {
  opacity: 0;
}

Should you want to achieve something similar with a single select, you could do it like so:

.choices__list--dropdown > .choices__list > .choices__placeholder {
  display: none;
}

[dphaas2004]

@ggsp Thanks for the css magic. it does indeed hide the placeholder. This only kind of worked for me as the placeholder is still taking up space. For me both the base implementation and this workaround do not function like a normal element placeholder would which is what I am going for. I'm sure there's a way to do it in css but for those who want to handle via JS this is how I ended up handling it:

const element = document.querySelector('#test');
const choices = new Choices(element,{
  allowHTML: true,
  placeholder: true,
  placeholderValue: "This is my Placeholder"
  });
const Inner = document.querySelector("div.choices__inner"); //Get the inner Container
const search = document.querySelector("div.choices__inner input[name='search_terms']"); //Get the search element (this is where the placeholder is)
const Width = Inner.offsetWidth;
element.addEventListener('change', (evnet)=> {
  //Add or remove the placeholder
  element.selectedOptions.length ? search.removeAttribute('placeholder') : search.setAttribute('placeholder',choices.config.placeholderValue);	
  //optionally keep the initial width of the container
  Inner.style.minWidth = `${Width}px`;
  search.removeAttribute('style');
});

<select id='test'  multiple>
	<option></option>
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>

[nitinatvaluelabs]

You can achieve this with CSS, e.g.:

.choices__list--multiple:not(:empty) + .choices__input::placeholder {
  opacity: 0;
}

Should you want to achieve something similar with a single select, you could do it like so:

.choices__list--dropdown > .choices__list > .choices__placeholder {
  display: none;
}

Thanks @ggsp You saved a tone of time ❤️