how can i create a dropdown list using javascript or jquery?

Question

Which code should I use so that I can create a dropdown list using Javascript or Jquery just like where I have to create a dropdown list for country and state and cities? Here is my code.



<!DOCTYPE html>
<html>
<head>
<title>BLAST FURNACE</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
    .spad{
        padding: 80px;
    }
    #my_image{
        width: 100%;
        height: auto;
    }
    .cont{
        width: 700px;
        height: 700px;
        border: 1px solid #000;
    }
</style>
</head>
<body>

<h1>BLAST FURNACE SIMULATION</h1>
<p>BLAST FURNACE SIMULATION PROCESS.</p>
<!-- <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
    <span class="spanloader">

</span>
</canvas> -->
<!-- <button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
CLICK HERE TO  CHARGE IRON ORE FLUX INTO BLAST FURNACE.</button> -->
<!-- <input type="button" id="btnnext" value="CLICK HERE TO  CHARGE IRON ORE FLUX INTO BLAST FURNACE" /> -->
<!-- <script>
var img=document.createElement("img");
img.src
</script> -->

<div class="cont">
    <div class="row spad">
        <img id="my_image" src="#"  class="img-fluid"/>
    </div>
    <span class="spanloader">
        <span>set Loading Image Image</span>
    </span>
</div>    


<input type="button" id="btn01" value="CLICK HERE TO SHOW EMPTY BLAST FURNACE " />
<input type="button" id="btn02" value="CLICK HERE TO CHARGE IRON ORE FLUX INTO BLAST FURNACE" />
<input type="button" id="btn03" value="CLICK HERE TO SHOW BLAST FURNACE" />
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript">

    $('#btn01').click(function () {       
        $("#my_image").attr("src", "empty.png");
    });
    $('#btn02').click(function () {       
        $("#my_image").attr("src","Sequence01_1.gif");
    });
    $('#btn03').click(function () {       
        $("#my_image").attr("src", "BLASTFURNACE.png");
    });

</script>
</html>

Here I want to create a dropdown list to select from country and after selecting country another dropdown list of cities should appear.

Where is your <select> tag with a list of countries? That part is basic HTML. — kmoser
– kmoser, Commented Mar 7, 2022 at 4:06
See this MDN page for select options. While you might need JavaScript to retrieve and handle the data, the basic markup is all HTML as @kmoser noted — Bumhan Yu
– Bumhan Yu, Commented Mar 7, 2022 at 4:12
it is just an example ...i want to use something different here . — Chandan Kumar Chowdhury
– Chandan Kumar Chowdhury, Commented Mar 7, 2022 at 4:30
What do you mean by something different ? Based on your writing, I assume you'd want a dropdown list of countries and a separate dropdown list of cities, and based on which country is selected, the city list will dynamically change, correct? Yes, you'd need JavaScript for basic logic, but nonetheless you'd need select and options HTML elements to render them. — Bumhan Yu
– Bumhan Yu, Commented Mar 7, 2022 at 4:33
Do you mean that you want “a more beautiful” option for a drop down? — Archit Gargi
– Archit Gargi, Commented Mar 7, 2022 at 4:50

Israr Ansari · Accepted Answer · 2022-03-07 08:15:38Z

-1

$(document).ready(function () {
  const sampleArr = [
    {id: 1, name: "test"},    {id: 1, name: "test"},
    {id: 1, name: "test"},
    {id: 1, name: "test"},
    {id: 1, name: "test"},
    {id: 1, name: "test"},
  ]
  
  if(sampleArr) {
   $("#stateLint").css({ display: "block" });
   sampleArr.map(sam => {
    $("#countryName").append( $(`<option>`, {
                value: sam.id,
                text: sam.name,
              }))
  })
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "stateLint" style="display: none">
  <select id="countryName"></select>
</div>;

You can do this like that

answered Mar 7, 2022 at 8:15

Israr Ansari

1

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

how can i create a dropdown list using javascript or jquery?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related