javascript - 如何在不使用 on change 或 onclick 事件的情况下获取动态附加选项？
问题描述
我在国家选择框中动态添加选项。选项出现在选择框中并在点击时被选中，但我想在 js 中添加它们。如果我在附加它们之后控制台选择框 html。我只有在 html 中添加的选项，而不是由 js 附加的所有其他选项。我不确定出了什么问题。这是我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
<link rel="stylesheet" href="assets/css/style1.css" />
</head>
<body>
<div class="dashboard" style="text-align: center;">
<div class="wrapper">
<section id="nav-tabs">
<div class="container">
<div class="row justify-content-between">
<div class="col-8 p-0">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active p-11" id="nav-profil1-tab" data-toggle="tab" href="#nav-profil1" role="tab" aria-controls="nav-home" aria-selected="true"><span class="word-profile hide">Profile</span> 1</a>
</div>
</nav>
</div>
<div class="col-2 align-self-center">
<i class="fa fa-plus plus" aria-hidden="true"></i>
</div>
<div class="col-xs-2">
<i class="fa fa-cog text-white setting" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section id="tabs">
<div class="container">
<div class="row" style="background-color: #013e77;">
<div class="col-xs-12 ">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-profil1" role="tabpanel" aria-labelledby="nav-profil1-tab">
<form class="text-center profile" style="color: #757575;" action="#!">
<div class="form-row">
<div class="form-group col-12">
<select class="form-control prefer" id="exampleFormControlSelect1" name="preferred">
<option>Preferred Profile</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group col-6">
<input type="text" class="form-control fname" id="inputfname" placeholder="First Name" name="first_name" required>
<p class="fname-error text-danger hide"></p>
</div>
<div class="form-group col-6">
<input type="text" class="form-control lname" id="inputlname" placeholder="Last Name" name="last_name" required>
<p class="lname-error text-danger hide"></p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control address" id="inputAddress" placeholder="Address" name="address" required>
<p class="address-error text-danger hide"></p>
</div>
<div class="form-group">
<input type="text" class="form-control apartment" id="inputAddress2" placeholder="Apartment, suite, etc. (optional)" name="apartment">
</div>
<div class="form-row">
<div class="form-group col-12">
<input type="text" class="form-control city" id="inputCity" placeholder="City" name="city" required>
<p class="city-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<select id="inputCountry" class="form-control country" name="country">
<option>--Select Country--</option>
</select>
</div>
<div class="form-group col-4">
<select id="inputState" class="form-control states" name="state">
<option>--Select State --</option>
</select>
</div>
<div class="form-group col-4">
<input type="text" class="form-control zip" id="inputZip" placeholder="Zip code" name="zip" required>
<p class="zip-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control phone" id="inputAddress" placeholder="Phone" name="phone" required>
<p class="phone-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_num" id="inputAddress" placeholder="Card Number" name="card_num" required>
<p class="card_num-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_name" id="inputAddress" placeholder="Name on Card" name="card_name" required>
<p class="card_name-error text-danger hide"></p>
</div>
<div class="form-group col-5">
<input type="date" class="form-control expiry" id="inputAddress" placeholder="Expiration Date" name="expiry" required>
<p class="expiry-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<input type="text" class="form-control cvv" id="inputAddress" placeholder="CVV" name="cvv" required>
<p class="cvv-error text-danger hide"></p>
</div>
<div class="form-group col-3">
<button type="submit" class="btn btn-primary save">Save</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-danger delete" data-id="">Delete</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-primary update" data-id="">Update</button>
</div>
<div class="form-group col-4">
<button type="button" class="activate"><i class="fa fa-bolt" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./Tabs -->
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
这是js：
/*----- Dashboard -----*/
appendCountries();
console.log($(".country").html());
/*------get countries from json-----*/
function appendCountries(){
$.getJSON('countries.json',function(result){
console.log(result.countries);
$.each(result.countries,function(index,country){
var option='<option value="'+country.id+"-"+country.name+'">'+country.name+'</option>';
$(".country").append(option);
});
});
}
提前致谢！我被困在这里请指导我在选择框上不添加任何事件的情况下获取选项的方法是什么
解决方案
发生这种情况是因为这里有一些异步操作。如果您$('.country').html()在插入选项后调用 - 它会显示您生成的 html 代码。至少可以通过两种方式：
- 调用after
$('.country').html()的回调。$.getJSON$.each(...) - 正如我在处理 Promise 的代码片段中一样
appendCountries，但首先我们应该通过添加returnbefore来返回它$.getJSON。
appendCountries().then(() => {
console.log($(".country").html());
});
/*------get countries from json-----*/
function appendCountries(){
return $.getJSON('https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json',
function(result){
// console.log(result);
$.each(result, function(index, country){
var option='<option value="'+index+"-"+country.country+'">'+country.country+'</option>';
$(".country").append(option);
});
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="countries" id="countriesSelect" class="country">
<option> -- select country -- </option>
</select>推荐阅读
- python - 我的 PDF 文件内容在提取其内容后没有意义
- node.js - Ubuntu 16.04 上的 MongoDB 未授权错误
- css - 调整 p 元素大小时保持 p 元素附加到 h2 不移动
- c# - 如何将面板的大小设置为 tableLayout 的完整大小？
- python - 在python中拆分数据框
- reactjs - 如何通过 flowtype 定义 ref 类型？
- php - 回显一个数组值，给出另一个数组的键
- c# - Linq：ForEach 项目返回从该项目开始获取 n 个唯一项目所需的项目数
- regex - 如何按照某种模式获取字符串？
- python - 如何在 Python 中将 base64 编码的字符串转换为没有磁盘 I/O 的文件（用于 HTTP 请求）