Am using bootstrap-multiselect with radio buttons and option group instead of checkboxes as I want the user to select only one option. The script works great but the first option in the dropdown is always selected, this happens only when using radio buttons, is there a way to disable this?
Ok, I thought its the default behaviour of most browsers, but I was wrong, so I had a quick look, but could not find the source - the radio is not explicitly markes as checked by the plugin...
I think it IS the default behavior for the browsers.
Think about it, if you display a
Example:
<select id="example1" size="2">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
Thanks for your comment, will add this to the documentation.
Any workaroud for this?
Simply set the selectedIndex to -1 on the select BEFORE you run multiSelect. That solves it. :)
Simply set the selectedIndex to -1 on the select BEFORE you run multiSelect. That solves it. :)
in jQuery, use $(dom).val('') :)
Thanks for this... was searching a solution way to long - maybe this should be mentioned in the docs?
Edit: Found it now in the docs ...
$('select').val('').multiselect();
works fine now! 👍
Solution for a Placeholder.
After call
$('#anyId').val('').multiselect();
You can set this
$('.multiselect-selected-text')[0].innerHTML = 'Any text you want';
@kaladarri @CodeBrauer
`
<script>
$("#tests").multiselect({
buttonWidth: "206px",
nonSelectedText: "test is test",
});
$("#tests").val("").multiselect();
</script>
<select id="tests" name="test1">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
`
Default choice 't1', This method is invalid. What's the reason?
I know it's been a while, the solution of @CodeBrauer works but if you have a configuration like:
$("#mySelect").multiselect({
buttonClass: "btn btn-default btn-lg btn-block",
buttonWidth: "100%",
maxHeight: 400,
});
When adding $("#mySelect").val("").multiselect();
you will realize that the styles you put as properties are discarded. So, in order to correct that, just do: $("#mySelect").val("");
. That's what @grunmin suggested.
@fperniavp Thank you , It's works!!!$("#mySelect").val("").multiselect();
Removing default selected for radio buttons ?
function ajaxSelectDataDefault(selectId, requestUrl, requestData) {
$.ajax({
type: 'POST',
url: requestUrl,
data: requestData,
success: function (data) {
var result = eval(data);
$("#" + selectId).val("").multiselect('dataprovider', result);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest, textStatus, errorThrown)
if (XMLHttpRequest.readyState === 4) {
if (XMLHttpRequest.status === 401) {
alert("ajax fail:" + errorThrown);
}
}
}
});
}
I have a simple solution by add a hidden option to the first.
$('#multiSelect').append(
$('<option class="hidden" ></option>')
.val("any text you want")
);
Have fun now.
Most helpful comment
Thanks for this... was searching a solution way to long -
maybe this should be mentioned in the docs?Edit: Found it now in the docs ...
$('select').val('').multiselect();
works fine now! 👍