How I can disable uncheck option from the bootstrap multi-select drop-down, actually on load some option by default is checked and I want those options not to be unchecked. Below I am providing an image for better understanding.
! [Link for the sample image] 1
From the above image those three is by default checked while page load and now I don't want to be unchecked those three (Cheese, Tomatoes, Mozzarella)
Below I am providing the link of the above requirement.
Link to the sample code
Thanks
You can just simply add disabled (and selected) attributes to the options which you want to keep selected.
<div class="form-group">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese" disabled selected>Cheese</option>
<option value="tomatoes" disabled selected>Tomatoes</option>
<option value="mozarella" disabled selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
It's important that you only initialize the multiselect after you have set the attributes
Related
I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface:
Theme's interface
However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution.
The html code for the forms:
<!-- Row -->
<div class="row with-forms">
<div class="search-form-_property_type col-md-3 custom-tipo-imovel">
<select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select">
<option value="">Tipo de imóvel</option>
<option value="apartamento">Apartamento</option>
<option value="casa">Casa</option>
<option value="sobrado">Sobrado</option>
</select>
</div>
<div class="search-form-_cidade col-md-3 custom-tipo-imovel">
<select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select">
<option value="">Cidade</option>
<option value="Curitiba">Curitiba</option>
<option value="Campo Largo">Campo Largo</option>
</select>
</div>
<div class="search-form-tax-region col-md-3 custom-tipo-imovel">
<select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select">
<option value="">Bairro</option>
<option value="bigorrilho">Bigorrilho</option>
<option value="cabral">Cabral</option>
<option value="centro">Centro</option>
<option value="portao">Portão</option>
</select>
</div>
<div class="col-md-3 ">
<button class="button fullwidth">Buscar</button>
</div>
</div>
How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.
*I noted that the first option is the same as the placeholder and has an empty value.
Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
Example:
https://material-ui.com/components/selects/
I have a dropdown, I'm binding it with owners, but its giving extra blank option. I want to remove the blank option from it. I'm able to do but when I add these changes my required validator does show error.
<md-input-container>
<select name="owner" ng-model="form.owner" ng-options="owner.UserName for owner in owners"
class="input-div" style="height:30px" ng-change="ownerTypeChange()" required ng-disabled="update && view">
<option style="display:none" value=undefined>Select an owner</option>
</select>
<div ng-messages="DataAccessRoleForm.owner.$error">
<div ng-message="required">required</div>
</div>
</md-input-container>
If I remove the below line, then required validator works but dropdown has the blank option.
<option style="display:none" value=undefined>Select an owner</option>
Check if your select has been touched before displaying the required message.
<div ng-if="form.owner.$touched" ng-message="required">required</div>
You can also set the default option to be selected but not selectable once they open the drop down.
<option value="" disabled selected hidden>Select an owner</option>
I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.
I have a validation message under a input. When a user inputs a message in the input and then selects an option from the select box the validation message hides and the select options get separated from the select box. I'm looking for a way to keep the options directly under the select box.
Thanks in advance.
Here is some quick code.
<input type='text' id='message'/>
<div id='msg'>add your message</div>
<select name="schools" id="schools" value="School" title="School">
<option value="">School</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">Three</option>
</select>
$('#message').blur(function () {
$('#msg').fadeOut();
});
Here is a fiddle http://jsfiddle.net/5qbEM/29/.
Looks like this is a chrome bug.
I need to add javascript or jquery code in order to select option from combobox. There are 25 comboboxes and there value read from database. Please find below code fragment
option which is selected by user needs to be selected. It has to be read from database.
<div class="control-group">
<label class="control-label">A. Nails are Clean *</label>
<div class="controls">
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely">Rarely</option>
</select>
</div>
</div>
If you add id attribute to select
<select name="obs_chart_nails_clean" id="obs_chart_nails_clean">
and add jquery to your page, then
$(document).read(function(){
$("#obs_chart_nails_clean").val("Rarely");
});
will select third option.
What do you have server-side? You should be able to produce html with correct option already selected.
In addition to the existing answers, the obvious no-javascript solution must be noted:
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely" selected>Rarely</option>
</select>
Simply add the selected attribute to one of the options.
$(document).ready(function(){
$('#obs_chart_nails_clean').val("Sometimes");
});