gpt4 book ai didi

javascript - 如何在同一选项/下拉菜单中扩展选择中的选项

转载 作者:行者123 更新时间:2023-11-27 23:38:18 25 4
gpt4 key购买 nike

我想创建一个带有下拉列表的选择菜单。但因为有很多选择,我想将它们分类。假设我需要人们选择城市。我希望国家和城市成为一个选项,但如果我选择一个国家/地区,那么选项将扩展到所选国家/地区的城市。一般来说,在 html 中我可以轻松做到,但在表单中则有点棘手..

这是我的html代码:

<select class="" placeholder="Your Choice">
<option value="Your Destination">Country1</option>
<option value="Your Destination">city1</option>
<option value="Your Destination">city2</option>
<option value="Your Destination">city3</option>
<option value="Your Destination">Country2</option>
<option value="Your Destination">city1</option>
<option value="Your Destination">city2</option>
<option value="Your Destination">city3</option>
</select>

最佳答案

这不是最好的实现,但可以作为入门的引用。

JSFiddle

代码

function createCountries() {
var html = "";
for (var i = 0; i < 5; i++) {
html += "<div class='country'>Country " + i + "</div>";
html += "<div class='cities'></div>";
}
$("#content").html(html)
}

function createCities() {
$(".country").each(function (row) {
var random = Math.floor(Math.random() * 10)
var html = "";
console.log(random);
if (random == 0) random = 5;

for (var i = 0; i < random; i++) {
html += "<div href='#' class='city'>City " + i + "</div>";
}
$(this).next().html(html);
})
}

function createAccordions() {
$("#content").accordion({
collapsible: true,
autoHeight: false,
active: 100 // Hack to keep it closd default
});
$("#main").accordion({
collapsible: true,
autoHeight: true,
active: 100 // Hack to keep it closd default

});
}

function createHTML() {
console.log($("#content").html())
createCountries();
createCities();
createAccordions();
}

createHTML()
.country {
color:#333;
font-size:16px;
}
.city {
color:Blue;
font-size:14px;
padding:5px;
border-bottom:1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="main">
<div>Main</div>
<div id="content"></div>
</div>

关于javascript - 如何在同一选项/下拉菜单中扩展选择中的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33935483/

25 4 0