Links in code dont work when try to click on them?-CodePudding

I am working on a script and trying to add links to submenu items based on bootstrap. The problem appears when I try to click on them. They don't work: https://smsverificator.com/2/demo/ Don't know the reason the cannot work here. I even don't know the language it's written below. Can anybody help me?

 <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="../dist/css/flags.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="../dist/js/jquery.flagstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
    <link rel="stylesheet" href="https://smsverificator.com/assets/css/language_switcher_style.css">
</head>
<body onl oad="prettyPrint()">
        <div >
            <form>
                <div >
                    <label>Select Language</label><br>
                    <div id="options"
                         data-input-name="country2"
                         data-selected-country="US">
                    </div>
                </div>
            </form>
        </div>

<script>
    $('#basic').flagStrap();
    $('#origin').flagStrap({
        placeholder: {
            value: "",
            text: "Language"
        }
    });
    $('#options')
    .flagStrap({
        countries: {
            "US": '<a target="_self" href="https://smsverificator.com">English</a>',
            "PL": '<a href="https://smsverificator.com/pl/">Polish</a>',
            "RU": '<a href="https://smsverificator.com/ru/">Russian</a>',
            "DE": '<a href="https://smsverificator.com/de/">German</a>',
            "UA": '<a href="https://smsverificator.com/ukr/">Ukrainian</a>',
            "ES": '<a href="https://smsverificator.com/es/">Spanish</a>',
            "FR": '<a href="https://smsverificator.com/fr/">French</a>',
        },
        buttonSize: "btn-sm",
        buttonType: "btn-info",
        labelMargin: "10px",
        scrollable: false,
        scrollableHeight: "350px"
    });

    $('#advanced')
    .flagStrap({
        buttonSize: "btn-lg",
        buttonType: "btn-primary",
        labelMargin: "20px",
        scrollable: false,
        scrollableHeight: "350px",
        onSelect: function (value, element) {
            alert(value);
            console.log(element);
        }
    });
</script>
        

</body>
</html>

How to make them clickable and work?

CodePudding user response：

Below is your edited code. I modified your array of countries to put only their names and created a separate table for the urls. When the user changes the selection, the OnSelect function is triggered. We then redirect the page to the new url

Make sure the version of flagstrap is the latest. It can be found here: https://github.com/blazeworx/flagstrap/blob/master/dist/js/jquery.flagstrap.min.js

   $('#options')
.flagStrap({
    countries: {
        "US": 'English',
        "PL": 'Poland',
        "RU": 'Russian',
        "DE": 'German',
        "UA": 'Ukrainian',
        "ES": 'Spanish',
        "FR": 'French',
    },
    buttonSize: "btn-sm",
    buttonType: "btn-info",
    labelMargin: "10px",
    scrollable: false,
    scrollableHeight: "350px",
    onSelect: function (value, element) {
        let urls = {
        "US": 'https://smsverificator.com',
        "PL": 'https://smsverificator.com/pl/',
        "RU": 'https://smsverificator.com/ru/',
        "DE": 'https://smsverificator.com/de/',
        "UA": 'https://smsverificator.com/ukr/',
        "ES": 'https://smsverificator.com/es/',
        "FR": 'https://smsverificator.com/fr/',
        };
        document.location.href = urls[value];
        console.log(element);
    }
});

CodePudding user response：

It's finally working. Thank you!