I am using the JQuery UI to be able to show images within a select box:
see
http://jqueryui.com/selectmenu/#custom_render
But how using this can I make "Select an option" the default value that appears within the selectbox but also does not show when the select drops down?
Thanks!
HTML code is as follows
<fieldset>
<select name="filesA" id="country">
<option data-class="austria" /> Austria</option>
<option data-class="belgium"/> Belgium</option>
<option data-class="bulgaria" />Bulgaria</option>
...
</select>
</fieldset>
include "Select an option" as one of the option and disable the option, So the user can't select it. Here is the code
<fieldset>
<select name="filesA" id="country">
<option selected="selected" disabled="true" /> Select an Option</option>
<option data-class="austria" /> Austria</option>
<option data-class="belgium"/> Belgium</option>
<option data-class="bulgaria" />Bulgaria</option>
</select>
</fieldset>
Related
The goal is to select users according to the option chosen in the first select.
It works fine the first time you select that type of user. But when I change the user type and go back to the previous one, it doesn't show the options in the select. But through the inspect element it appears that the option has the "selected" attribute
<label for="UserType" class="col-md-2 control-label">User Type nbsp;<span class="text-danger small">*</span></label> <div class="col-md-4">
<select class="select2_demo_1 form-control" id="UserType" name="UserType">
<option value='0' selected disabled hidden>-- Selecionar --</option>
<option value="1">Boss</option>
<option value="2">Admin</option>
<option value="3">User</option>
</select>
<label for="Users" class="col-md-2 control-label">Users <span class="text-danger small">*</span></label><div class="col-md-10">
<select id="Users" name="Users" class="select2_demo_1 form-control" multiple style="width:100%">
<option data-type='1' value="1" >User Boss</option>
<option data-type='2' value="2" >User Admin</option>
<option data-type='2' value="3" >User Admin 2</option>
<option data-type='3' value="4" >User</option>
</select>
$('#UserType').on('change', function() {
var UserType = $(this).val();
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
});
$('#UserType').trigger('change');
------ Solution ------
Change the code segment
$("select#Users option:selected").attr("selected",false);
$("select#Users option[data-type="+ UserType +"]").attr("selected","selected");
$("#Users").select2();
by the following
$('#UserType').select2('destroy').find('option').prop('selected', false).end().select2();
$('#UserType').select2('destroy').find('option[data-type='+ UserType+']').prop('selected', 'selected').end().select2();
You may think to add selected="true" and then change it to false when you apply the function attr()
Using :
How to create a Dynamic Bootstrap Multiselect
It was pretty easy to come up with this :
<fieldset class="my-fieldset" style="width: 500px;">
<legend class="my-fieldset">Catégories</legend>
<div style="text-align: center;">
<div style="display: inline;">
<span><b>Matériels</b></span>
<select style="display: none;" class="chkveg" name="categories" multiple="multiple">
#foreach (var configCateg in listeCategories)
{
if (configCateg.APPR_CATEGORIE.CATEGORIE.StartsWith("IF"))
{
<option selected="False" value="#configCateg.DESCRIPTION">#configCateg.DESCRIPTION</option>
}
}
</select>
</div>
</div>
</fieldset>
But what if i want to have some of the options selected and others not...
I know there is a selected property but it didn't change anything when i tried selected="false"
Any help is apreciated
Unfortunately all the below will result in a selected option item.
<option selected >One</option>
<option selected = "False" >One</option>
<option selected = "0" >One</option>
<option selected value="1">One</option>
<option selected=false value="2">222</option>
<option selected="i really dont want this" value="3">33</option>
If you do not want an item selected, you should render an option item without the selected attribute.
<option value="1" selected >One</option>
<option value="2">This one will not be selected</option>
<option value="3" selected >One</option>
You might consider using the Html.DropdDownListFor helper method or SELECT tag helper to render the select element with some options selected.
I want to use data-theme d in my select. How ever jQuery Mobile ignores the data-theme="d"and display it as theme a.
<div id="mutualFriends">
<select class="sortBy" name="sortBy" data-url="${url}" data-theme="d">
<option value="">Sort By</option>
<option value="new" selected="selected">Newest</option>
<option value="old">Oldest</option>
<option value="firstName_asc">First Name a-z</option>
</select>
I am using marionette.js and jquery mobile for my application. Following is the code that I have used in template file for drop down but its not working, I have used "data-native-menu=false" for displaying option in popup
<div id="whatDiv" data-role="fieldcontain">
<label >Main Category</label><br>
<select data-native-menu=false>
<option value=1> Balance </option>
<option value=2> 2 </option>
<option value=3> 3 </option>
<option value=4> 4 </option>
<option value=5> 5 </option>
</select>
</div>
Thanx in advance
i think you want like this , see below jsfiddle links
www.jsfiddle.net/57eJm/
After upgrading to jQuery Mobile 1.1.1 earlier today (7/13/2012) I noticed that all of my Custom Select menus no longer show the placeholder text on page load. Is there something I need to do differently in 1.1.1 to show the placeholder text in custom select menus? Help!?!?
Here's a sample of my code:
<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
<label for="ceiling" class="select" data-theme="a">Ceiling</label>
<select name="ceiling" id="ceiling" data-theme="a" data-native-menu="false" class="required">
<option data-placeholder="true">Ceiling (Yes/No)</option>
<option value="Yes">Ceiling: Yes</option>
<option value="No">Ceiling: No</option>
</select>
</div>
Sample image (the black bars are my custom select menus):
this code is working for me :
<select>
<option value="" data-placeholder="true">Choose one:</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Just put value="" on your placeholder option