Bootstrap 4 - Assign placeholder to <select> form input - css

I've searched a bit but the found solutions here on SO seems not working for me. I have a select input field and I want to assign it a placeholder. I'm using bootstrap 4 and to manage the front-end.
As I understand from the documentation I need to assign the selected hidden or selected disabled to the <option> tag I want to use as placeholder. I've tried but didn't worked.I don't know if this is because I'm using vue.js, is there a fix?
<label>Filter List</label>
<select
class="form-control"
v-model="listFilter"
v-on:change="filterList()"
>
<option value="" selected disabled class="text-hide">Select filter</option>
<option value="a">All</option>
<option value="f">Fe</option>
<option value="m">Mas</option>
<option value="s">Tru</option>
<option value="c">Cou</option>
</select>

Related

Mat selection list how focus a specific item using a search bar

I would like to ask how I can focus on a specific item in the long list via a search bar.
example: when a user enters something on the search bar, the list is filtered to find the elements that contain that search key, I would like that if at least one result is found, the focus is placed on the first element found.
when user visit the page:
after the user search a something:
thanks!
i don't know if this solves your problem or not u can use datalist tag in html which work kind of similar it will filter everything except what u have typed in search box instead of focusing at that element.
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Custom Dropdown or select box using CSS

<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
this is a normal select box in which when we select one, its value changes to One. But let me know is it possible to set value 1 when I select one
like the image shown down
I think here we set +297 as the value for the option Aruba
You can also suggest any other alternative way to do so

Wordpress Settings API update_option for select option with text area

How can i create different option and update them with update_option?
For each option there should be a text area witch should be updated
<select>
<option value="option-one"></option>
<textarea>option-one</textarea>
<option value="option-two"></option>
<textarea>option-two</textarea>
<option value="option-three"></option>
<textarea>option-three</textarea>
</select>
How can i do this?

How to reinitialize dynamic Semantic UI Search Dropdown

How can I reinitialize selectdd2 dropdown option on change of selectddl dropdown? Anyone can help me on this?
For example : If we select country the corresponding states will be loaded in second dropdown.
HTML Code
<select class="ui search selection dropdown dropdown-spinner" id="selectdd1">
<option value="">Select Country</option>
</select>
<select class="ui search selection dropdown dropdown-spinner" id="selectdd2">
<option value="">Select State</option>
</select>
There is no need reinitialize your dropdown input , all you need is to change options dynamically in select element (state) when the value of your first select element (country) is changed ,by listening to onchange event.
Here is a simple demo example , and here is an example with Semantic-UI countries flags

overriding ubercart's way of displaying attributes options selection (drupal)

I found a problem with ubercart for Drupal and I am trying to find a workaround. I would like to display the options of an attribute as radio buttons by default instead of a select box. The problem with ubercart is that there is a way to set the default by setting it at admin/store/attributes/ but it is always overriden at the product level. So the content uploader has to select radio buttons for every product.
The work around I would like to implement is with hook_form_alter or similar. But I am struggling at finding the right function to override. If it can be of any help, here is the source code of the select box:
<div class="attribute attribute-1 odd">
<div id="edit-attributes-1-wrapper" class="form-item">
<label for="edit-attributes-1">
Color:
<span class="form-required" title="This field is required.">*</span>
</label>
<select id="edit-attributes-1" class="form-select required" name="attributes[1]">
<option selected="selected" value="">Please select</option>
<option value="7">Black | 000000</option>
<option value="6">Blue | 5E79A4</option>
<option value="5">Red | C33438</option>
</select>
</div>
</div>
This was fixed in Drupal 7/Ubercart 3. Have you tried deifining product classes and the defaults for that class. Your default options may stick when adding a product under a class.

Resources