Home » Javascript » Dropdown value and radio button

Dropdown value and radio button

Posted by: admin August 12, 2018 Leave a comment

Questions:

I’m actually trying to bind my dropdown and my radio button which is has to be checked when one of the dropdown values is selected and if nothing is selected it is unchecked.

So actually my code isn’t going to my “else if” part and I don’t know why…

Thanks for helping.

Here is my code for that section :

<div class="container">
            <div class="row">
                <div class="col-sm-7">
                    <ul id="operation">
                        <li class="operationList">Versement</li>
                        <li class="operationList">
                            <div class="dropdown">
                                <button class="btn dropdown-toggle btnDropDown myBtn" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Rachat <span class="caret"></span>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <h6 class="dropdown-header" style="font-weight: bold; color: black">Rachat</h6>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item rachat">Rachat partiel</a>
                                    <a class="dropdown-item rachat">Rachat partiel programme</a>
                                    <a class="dropdown-item rachat">Rachat total</a>
                                </div>
                            </div>
                        </li>
                        <li class="operationList">
                            <div class="dropdown">
                            <button class="btn dropdown-toggle btnDropDown myBtn" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Arbitrage
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <h6 class="dropdown-header" style="font-weight: bold; color: black">Arbitrage</h6>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item arbitrage">Arbitrage fonds</a>
                                <a class="dropdown-item arbitrage">Arbitrage modes de gestion</a>
                                <a class="dropdown-item arbitrage">Arbitrage orientation de gestion</a>
                            </div>
                        </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="ulOperationListBtn">
                        <li class="operationListBtn"><input class="radio1" type="radio" name="operation" value="versement" /></li>
                        <li class="operationListBtn"><input class="radio2" type="radio" name="operation" value="rachat" /></li>
                        <li class="operationListBtn"><input class="radio3" type="radio" name="operation" value="arbitrage"/></li>
                    </ul>
                </div>
            </div>
        </div>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.dropdown-menu').on( 'click', 'a', function() {
            var text = $(this).html();
            var htmlText = text;
            var rachat = $('.rachat');
            var arbitrage = $('.arbitrage');

            if (rachat) {
                console.log(arbitrage);
                console.log($('.radio2'));
                $('.radio2').attr('checked', 'checked');
            } else if (arbitrage) {
                console.log("hereWeGo");
                $('.radio3').attr('checked', 'checked');
            }
            else{
                $('.radio2').attr('unchecked', 'unchecked');
                $('.radio3').attr('unchecked', 'unchecked');
            }

            $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
        });
    });
</script>
Answers: