Write a JavaScript program to count and display the items of a dropdown list, in an alert window

 <!-- //Write a JavaScript program to count and display the items of a dropdown list, in an alert window -->

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <style type="text/css">
        body {
            margin: 30px;
        }

        #confirm {
            display: none;
            background-color: #F3F5F6;
            color: #000000;
            border: 1px solid #aaa;
            position: fixed;
            width: 300px;
            height: 100px;
            left: 40%;
            top: 40%;
            box-sizing: border-box;
            text-align: center;
        }

        #confirm button {
            background-color: #FFFFFF;
            display: inline-block;
            border-radius: 12px;
            border: 4px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 60px;
            cursor: pointer;
        }

        #confirm .message {
            text-align: left;
        }
    </style>
    <title>Count and display items of a dropdown list - w3resource</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="confirm">
        <div class="message" id="idmsg">This is a warning message.</div><br>
        <button class="yes">OK</button>
    </div>
    <input type="button" value="Click Me" onclick="functionAlert();" />
    <form>
        Select your favorite Color :
        <select id="mySelect">
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
            <option>White</option>
        </select>
        <input type="button" onclick="getOptions()" value="Count and Output all items">
    </form>

    <script>
        function functionAlert(msg, myYes) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes").unbind().click(function () {
                confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            let idmsg =document.getElementById('idmsg').style.textAlign = "center";
            confirmBox.show();
        }
        function getOptions() {
            let mySelect = document.getElementById('mySelect');
            let length = document.getElementsByName('option').length;
            alert(mySelect.length);
            functionAlert(mySelect.length);
        }
    </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Write a JavaScript program to get the current date.

  <! DOCTYPE   html > < html   lang = "en" > < head >    < meta   charset = "UTF-8" >    < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >    < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >    < title > Document </ title > </ head > < body >    < div   id = "showdate" ></ div >    < button   id = "print" > Print </ button >    < script >      let   print2  =  document . getElementById ( "print" );      print2 . addEventListener ( "click" ,  function (){        let   showdate2  =  document . getElementById ( "showdate" );        let   d  =  new   Date ;     ...
Read more

Store and display the values of text boxes of a form

  <! DOCTYPE   html > < html > < head >    < meta   charset = utf-8   />    < title > Return first and last name from a form - w3resource </ title > </ head > < body >    < div   id = "content" ></ div >    < form   id = "form1"   onsubmit = " getFormvalue () " >     First name:  < input   type = "text"   name = "fname"   value = "David"   id = "fname" >< br >     Last name:  < input   type = "text"   name = "lname"   value = "Beckham"   id = "lname" >< br >      < input   type = "submit"   value = "Submit" >    </ form >    < script >      function   getFormvalue () {   ...
Read more