To get the chosen value of a select2
I'm using:
var x = $("#select").select2('data');
var select_choice = x.text
The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected
This question is related to
jquery
jquery-selectors
jquery-select2
$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});
$("#e2").select2({
placeholder: "Select a State",
allowClear: true
});
$("#e2_2").select2({
placeholder: "Select a State"
});
The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code.
When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option.
Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.
you can init placeholder in you select html code in two level such as:
<select class="form-control select2" style="width: 100%;" data-placeholder="Select a State">
<option></option>
<option>?????</option>
<option>????</option>
<option>??????</option>
<option>?????</option>
<option>?????</option>
<option>?????</option>
<option>???</option>
</select>
1.set data-placeholder attribute in your select tag 2.set empty tag in first of your select tag
Just add this class in your .css file.
.select2-search__field{width:100% !important;}
Put this in your script file:
$('select').select2({
minimumResultsForSearch: -1,
placeholder: function(){
$(this).data('placeholder');
}
});
And then in HTML, add the following code:
<select data-placeholder="Your Placeholder" multiple>
<option></option> <------ this is where your placeholder data will appear
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
<option>Value 5</option>
</select>
I tried all this and in the end, simply using a title="text here"
worked for my system. Note there is no blank option
<select name="Restrictions" class="selectpicker show-tick form-control"
data-live-search="true" multiple="multiple" title="Choose Multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
This worked for me:
$('#SelectListId').prepend('<option selected></option>').select2({
placeholder: "Select Month",
allowClear: true
});
Hope this help :)
In the current version of select2
you just need to add the attribute data-placeholder="A NICE PLACEHOLDER"
. select2
will automatically assign the placeholder.
Please note: adding an empty <option></option>
inside the select is still mandatory.
Use a empty placeholder on your html like:
<select class="select2" placeholder = "">
<option value="1">red</option>
<option value="2">blue</option>
</select>
and in your script use:
$(".select2").select2({
placeholder: "Select a color",
allowClear: true
});
I did the following:
var defaultOption = new Option();
defaultOption.selected = true;
$(".js-select2").append(defaultOption);
For other options I use then:
var realOption = new Option("Option Value", "id");
realOption.selected = false;
$(".js-select2").append(realOption);
Try this.In html you write the following code.
<select class="select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
And in your script write the below code.Keep in mind that have the link of select2js.
<script>
$( ".select2" ).select2( { } );
</script>
$selectElement.select2({
minimumResultsForSearch: -1,
placeholder: 'SelectRelatives'}).on('select2-opening', function() { $(this).closest('li').find('input').attr('placeholder','Select Relative');
});
The simplest way to add empty "option" before all.
<option></option>
Example:
<select class="select2" lang="ru" tabindex="-1">
<option></option>
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
Also js code, if you need:
$(document).ready(function() {
$(".select2").select2({
placeholder: "Select a state",
allowClear: true
});
});
}
Source: Stackoverflow.com