how make a drop down a in bootstrap and give style on it

Question

I have a drop down.I need to select the selected index and get the value.Its a bootstrap drop down i have copied from bootstrap website..

  <div class="col-md-6">
     <div class="btn-group">
         <button data-toggle="dropdown" class="btn dropdown-toggle">Please Select 
            <span class="caret"></span>
         </button>
            <ul class="dropdown-menu">
               <li><a href="#">Yes</a></li>
               <li><a href="#">No</a></li>
            </ul>
      </div>
 </div>

I want to select the selected index if yes it goes 1 and No it goes 0.

NSTuttle · Answer 1 · 2016-09-16T07:21:49.353

0

From what I understand from both the title "give style on it" as well as the brief description, you want to add CSS styles to a particular <li> element, whether on hover, static etc.

If so..

Assign a class to each <li> element

 <ul class="dropdown-menu">
    <li class="descriptiveClassNameBecauseGavgrifSaidSo"><a href="#">Yes</a></li>
    <li class="descriptiveClassNameBecauseGavgrifSaidSo"><a href="#">No</a></li>
 </ul>

Then style those via CSS however you see fit

.descriptiveClassNameBecauseGavgrifSaidSo:hover {
    background-color: red;
}

I don't know if that is what you want, however you should and can still elaborate a bit further on what your goal is i.e. "I want the background color of the first <li> element to be..." ... When I do Whatever action

edited Sep 16 '16 at 07:21

answered Sep 16 '16 at 04:33

NSTuttle

3,237
2
17
26

I am not able to select the current index which I wanted.Suppose I want to select yes.Than if i click on drop down its not getting selected.How can I show the selected value yes or no in the drop down button which I have taken above. – Basant Gera Sep 16 '16 at 05:00
i would never recommend a class of .styles onto an element - its not descriptive for the intended action and it is confusion to consider the "style rules of .styles" – gavgrif Sep 16 '16 at 06:29
@gavgrif Well Obviously... This is for a teaching experience alone... Assuming you have picked up a code book once or twice... do they ever follow that guideline while giving snippet examples, hardly ever. – NSTuttle Sep 16 '16 at 06:52
@Illdapt - I am a teacher. and to teach a beginner a coding nomenclature that will cause confusion is not teaching. I am also a student and would not want to be taught poor quality naming conventions. – gavgrif Sep 16 '16 at 06:57
@BasantGera What exactly do you mean by "show the selected value in the drop down button"? Do you mean that clicking on the dropdown does not "show" the two `
` elements, or do you mean that by clicking the dropdown, the options DO show, but if you click on "Yes" the text "Please Select" needs to change to "Yes" or do you want a value of `yes` to be sent, used or otherwise consumed by something i.e. an online form asking you a yes/no question.

NSTuttle

Sep 16 '16 at 07:01

@gavgrif I would assume anyone using Bootstrap to build is not an elementary developer, clearly he knows classes, as his example code shows him utilizing them. Instead of criticizing those actually on the path to understanding the OP's issue, make an edit and/or contribute an answer like your badge shows off that you clearly know how to. – NSTuttle Sep 16 '16 at 07:07

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

My Understanding:

I could be wrong here in understanding your statement:

select the selected index if yes it goes 1 and No it goes 0

But if I understand that correctly, what you are wanting is to have your <li><a href="#">Yes</a></li><li><a href="#">No</a></li> actually change from yes to 1 and no to 1 when a person on.click the given <li> value.

Now, if that presumption on my part of what you are wanting, is actually what you are wanting, you are going to need more than just bootstrap, and you will need to introduce a bit of jquery into the mix of things.

I shared this a couple days ago on another question that had a similar situation.

Here is the example code in a jsfiddle for that specific situation, but I think it might also be applicable to your situation.

If you want to pass the data through a form:

Then you are probably going to have to use the method I have in my jsfiddle, which basically goes like this:

$('#optionsList li').on('click', function() {
    $('#passToThis').val($(this).data("id"));
    $("#privacyButton").html($(this).data("value"))
});

If all you want to do is just change the text:

Then all you should need is the second line of that same code:

$('#optionsList li').on('click', function() {
    $("#privacyButton").html($(this).data("value"))
});

With the data-id="" within the <li> being the key part to your question/solution.

And, if I am totally off-base in all of this and not at all what you are actually answering, well, hopefully all of this will help somebody else.

how make a drop down a in bootstrap and give style on it

2 Answers2

My Understanding:

If you want to pass the data through a form:

If all you want to do is just change the text: