30

Is it possible to change the message of a select picker, if nothing is selected. For now, 'Nothing selected' is written. I know, the noneSelectedText attribute contains that message.

But I dont want to change it in the bootstrap.select.js. I want to change it dynamically, because I use different select pickers at different locations.

Edit:

Thank you, it works :)

0

4 Answers 4

59

Set title attribute to your selects.

<select multiple title="Empty" class="selectpicker">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<select multiple title="No Value" class="selectpicker">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
$('.selectpicker').selectpicker();

JSFiddle

2
  • Hi, related to selectpicker class for dropdown, the default color is grey, how to change the grey color to clear color?
    – mastersuse
    Commented Nov 6, 2019 at 5:20
  • @mastersuse Probably should be in a separate question.
    – Nick
    Commented Jul 28, 2023 at 19:04
17

with help of - this I tried it works .

1st step - we have to add data-none-selected-text attribute in Html select tag. example -

<select name="your_sel_name" multiple class="form-control selectpicker" data-selected-text-format="count" data-none-selected-text >

2nd Step - in js on page load use noneSelectedText option
example -

$(".selectpicker").selectpicker({
        noneSelectedText : 'Please Select' // by this default 'Nothing selected' -->will change to Please Select
    });

Hope it will Help some-one Thanks!

2
  • I just added [data-none-selected-text=" "] attribute to the <select> element and didn't need to do anything on the JS side Commented Mar 5, 2020 at 21:16
  • 1
    And I used just the second step and also worked for me :)
    – K. Stopa
    Commented Jul 14, 2020 at 12:39
6

In my case, I just needed to add this HTML code :

data-none-selected-text="please select..."

when defining <select>, so my working code:

<select name="..." class="..." data-none-selected-text="please select...">
<option>...</option>                    
</select>
-1

You ca use content attribute of html to dynamically load the content value content : "No Value selected"

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.