Query dropdown selected option

Question

I am trying to make a dropdown selection with jquery over bootstrap, for me this seems to be hard to be done. This is my code:

<div id="green" class="X dropdown mt-4 pb-3">
    <button id="btn" type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">Select
        languange</button>

    <button class="dropdown-menu">
        <a id="1" class="dropdown-item" href="#">English</a>
        <a id="2" class="dropdown-item" href="#">German</a>
        <a id="3" class="dropdown-item" href="#">French</a>
    </button>
</div>

$('.classdropdwn').click(function(){$('.classbutton').html( $(this).text)})

also I have tried sometrhing like this:

$(document).ready(function(){
    $('#btn').click(function(){
        $("#btn").empty()
        $("#btn").html( $(this).text)
    });                 
});

Thank you for your help!

Your HTML is invalid; you cannot have nested clickable elements - in other words `` within a ` — Rory McCrossan, Sep 25 '18 at 10:24
As I have seen in the bootstrap documentation, the class "dropdown-menu" should be in a
tag. Also check a look here https://getbootstrap.com/docs/4.0/components/dropdowns/ — Brank Victoria, Sep 25 '18 at 10:26
@Adrian Badulescu If you are using bootstrap then no need of jquery just call class name properly as in the bootstrap documentation. — Husna, Sep 25 '18 at 10:31
@RoryMcCrossan Hi there! , the above code was copied from W3Schools as per link https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp — A B, Sep 25 '18 at 12:10
In that example the `` elements are children of a `div`, which is valid. Also, please don't use W3Schools as a reference. Their articles are often outdated and sometimes just plain wrong. MDN is far more comprehensive and accurate. — Rory McCrossan, Sep 25 '18 at 12:11
@Husna Hi! this is an assignment so I need to do it through Jquery — A B, Sep 25 '18 at 12:14

score 0 · Answer 1 · answered Sep 26 '18 at 07:16

You can do like this also is a sample code I have done

$(document).ready(function(){
    $('#btn').click(function(){
     $('.dropdown-menu').toggle();
    });                 
});

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="green" class="X dropdown mt-4 pb-3">
    <button id="btn" type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">Select
        languange</button>

    <button class="dropdown-menu">
        <a id="1" class="dropdown-item" href="#">English</a>
        <a id="2" class="dropdown-item" href="#">German</a>
        <a id="3" class="dropdown-item" href="#">French</a>
    </button>
</div>

@Adrian Badulescu If it is helpful for you then appreciate :) — Husna, Sep 26 '18 at 09:33

Query dropdown selected option

1 Answers1