如何使用 javascript 或 jquery 创建下拉列表？

Question

我应该使用哪种代码，以便我可以使用 Javascript 或 Jquery 创建下拉列表，就像我必须为国家和 state 和城市创建下拉列表一样？ 这是我的代码。


  
  
   
    
    <!DOCTYPE html>
<html>
<head>
<title>BLAST FURNACE</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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/jquery@3.5.1/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>

在这里，我想创建一个从国家到 select 的下拉列表，在选择国家之后，应该会出现另一个城市下拉列表。

Answer 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>;

你可以那样做

如何使用 javascript 或 jquery 创建下拉列表？

问题描述

1 个解决方案

解决方案1
-1 2022-03-07 08:15:38

如何使用 javascript 或 jquery 创建下拉列表？

问题描述

1 个解决方案

解决方案1 -1 2022-03-07 08:15:38

解决方案1
-1 2022-03-07 08:15:38