bootstrap-select wrong selection made to options

Question

Here is my snippet :

<form action="/Section/Save">
<select class="selectpicker show-tick" id="CourseID" name="CourseID">
    <option>Pick One</option>
            <option value="1" title="Microsoft Office" data-content="<ul class='select-ul'><li class='text-green'>1</li><li>Microsoft Office</li></ul>">Microsoft Office</option>
            <option value="2" title="DTP" data-content="<ul class='select-ul'><li class='text-green'>2</li><li>DTP</li></ul>">DTP</option>
            <option value="4" title="Microsoft Office" data-content="<ul class='select-ul'><li class='text-green'>4</li><li>Microsoft Office</li></ul>">Microsoft Office</option>
            <option value="5" title="Microsoft Office" data-content="<ul class='select-ul'><li class='text-green'>5</li><li>Microsoft Office</li></ul>">Microsoft Office</option>

</select>
<input type="submit" value="Submit" />

The problem is, every time I open the dropdown list, wrong item is selected (or) in some cases, nothing is selected

Are you providing some kind of variable to automatically select an item from the dropdown list? Your form seems to work just fine, what are you expecting to happen? — tempranova, Mar 05 '16 at 07:03
Dropdown list is supposed to select the last item the user has selected when the use opens the dropdown menu. In my case, it is not selected (or) wrong item is being selected. — M. Ko, Mar 05 '16 at 07:33
If you aren't storing the value anywhere or marking any value as "selected", then it's not going to automatically select anything but the first option. https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element — tempranova, Mar 05 '16 at 07:34
The code works fine when the page first load. It is not working properly when user select other option. I am using this [library](http://silviomoreto.github.io/bootstrap-select/examples/#custom-content) — M. Ko, Mar 05 '16 at 08:02

The Teknicalist · Answer 1 · 2016-03-05T08:12:22.797

0

Can you be more in depth on your problem and what you want helped with?

I did my best to try and understand what it was you're asking, is this what you were looking for?

<form action="/Section/Save">
  <select class="selectpicker show-tick" id="CourseID" name="CourseID">
    <option>Pick One</option>
    <option value="1" title="Microsoft Office" style="color: green">
      1 Microsoft Office<
    </option>
    <option value="2" title="DTP" style="color: green">
      2 DTP
    </option>
    <option value="3" title="Microsoft Office"style="color: green" >
      3 Microsoft Office
    </option>
    <option value="4" title="Microsoft Office" style="color: green">
      5 Microsoft Office<
    </option>

  </select>
  <input type="submit" value="Submit" />

edited Mar 05 '16 at 08:12

answered Mar 05 '16 at 06:45

The Teknicalist

1
3

Are HTML tags supported inside – M. Ko Mar 05 '16 at 07:29
Nope, look here: [link](http://stackoverflow.com/questions/3354979/styling-part-of-the-option-text) The – The Teknicalist Mar 05 '16 at 07:55
Of course it doesn't have to be an id, could be a class, or in the example: inline styling. – The Teknicalist Mar 05 '16 at 08:02
I am using this [library](http://silviomoreto.github.io/bootstrap-select/examples/#custom-content) – M. Ko Mar 05 '16 at 08:03
Are you trying to make a specific character green then? You could try doing just: data-content="1" . But trying to do a list inside a list item won't work. – The Teknicalist Mar 05 '16 at 08:09
did a bit of digging. the class name selectpicker is deprecated, use bootstrap-select. And the data-content method is deprecated now – The Teknicalist Mar 05 '16 at 08:38
If that is, can you provide the correct technique of usage since I need to display rich information within option tag. With best regards.. – M. Ko Mar 05 '16 at 09:16
Instead of trying to use form/select/option use a dropdown div. Can you be more thorough on what you're trying to do with this? Is it for like a contact form? or some kind of votes? – The Teknicalist Mar 05 '16 at 09:27
If this is trying to get/post data then use this as a base model [Bootstrapv4 Forms](http://v4-alpha.getbootstrap.com/components/forms/) – The Teknicalist Mar 05 '16 at 09:29

score 0 · Answer 2 · answered Mar 05 '16 at 07:39

0

In order to set a value as "selected", so that it appears as the first option when the user opens the page, you need to have stored the value and then check for it. An easy way to do this in PHP would be as follows (remember you have to have stored the value previously and be checking for it):

  <select>
    <option>Default if none pre-selected</option>
    <option <?php if($this_value=='this_option_value') { echo 'selected="selected"' }; ?> value='this_option_value'></option>
    <option <?php if($this_value=='this_option_value2') { echo 'selected="selected"' }; ?> value='this_option_value2'></option>
  </select>

Related answer: How can I set the default value for an HTML <select> element?

answered Mar 05 '16 at 07:39

tempranova

929
9
13

Yes. But in this case, it is not normal select, it is the modified bootstrap-select [Bootstrap-Select](http://silviomoreto.github.io/bootstrap-select/) – M. Ko Mar 05 '16 at 07:59
But don't you still have to set it to "selected" in a normal way, or at least do some kind of Javascript to set the value? (i.e., `$('.selectpicker').val('2');` will set the current value of the dropdown). Looking at docs for Bootstrap-Select, I don't see you doing anything aside from the data-content attribute. – tempranova Mar 05 '16 at 18:59

score 0 · Accepted Answer · answered Mar 07 '16 at 03:00

After two days of struggling with the problem, I have finally been able to identified the cause. It's because the <ul></ul> tag in the data-content is messing up with the index of elements in the library. So, I have to avoid to use <ul></ul> in the data-content attribute.

bootstrap-select wrong selection made to options

3 Answers3