js 向select动态添加option，已添加，但网页不显示

yepp13 2019-04-19 10:01:17
各位大神帮忙看下，感激不尽！

HTML，js，css代码如下

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/images/3.PNG" type="image/x-icon">
<title>监控平台</title>
<link href="../static/bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet">
<link href="../static/bootstrap-select-1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet">
<link href="../static/css/online_offline.css" rel="stylesheet">
<link href="../static/sweetalert/sweetalert.css" rel="stylesheet">
</head>
<body class="bg">
<div class="content">
<div class="title">记录系统</div>
<hr style="color: #0c0c0c">
<div class="two_button">
<button class="btn btn-info online_button" onclick="show_online_div()">持续老化</button>
<button class="btn btn-info offline_button" onclick="show_offline_div()">新增SN</button>
</div>
{# 新增SN#}
<div class="input_item_offline">
<div>
<form class="bs-example bs-example-form" role="form">
<div class="input-group item">
<span class="input-group-addon title1">ORT/LLT NO.</span>
<input type="text" class="form-control" placeholder="">
</div>

<div class="input-group item">
<span class="input-group-addon title1">SNs</span>
<input type="text" class="form-control" placeholder="请输入SN">
</div>

<div class="input-group item">
<span class="input-group-addon title1">Testtime(H)</span>
<input type="text" class="form-control" placeholder="请输入老化时间">
</div>

</form>
</div>

<div style="margin-top: 30px;padding-top:20px;">
<a style="color: whitesmoke !important;" href="/view/">跳转到显示页面</a>
<button class="btn btn-default" style="margin-left: 100px;width: 96px">确定</button>
</div>

</div>
{# 持续老化#}
<div class="input_item">
<div class="item">
<label class="input_label">ORT/LLT NO.</label>
<select class="selectpicker main_input" id="ORT_LLT_NO" data-size="10" data-live-search="true" title="请选择ORT/LLT_NO"> </select>
</div>
<div class="item">
<label class="input_label">SNs</label>
<select class="selectpicker main_input" id="SN" data-size="10" data-live-search="true" title="请选择SN"> </select>
</div>
<div class="item">
<div style="float: left">
<label class="input_label">Testtime(H)</label>
</div>
<div style="float: left">
<input type="text" class="form-control main_input" placeholder="请输入老化时间" style="height: 35px;margin-left: 3px">
</div>
</div>

<div class="clearfix"></div>
<div style="margin-top: 30px;padding-top:20px;">
<a style="color: whitesmoke !important;" href="/view/">跳转到显示页面</a>
<button class="btn btn-default" style="margin-left: 100px;width: 96px">确定</button>
</div>
</div>

</div>

<script src="../static/js/jquery-1.11.3.min.js"></script>
<script src="../static/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script src="../static/bootstrap-select-1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="../static/js/online_offline.js"></script>
<script src="../static/sweetalert/sweetalert.min.js"></script>
</body>
</html>


javascript：
$(document).ready(function () {
add_no();
add_sn();
});

function show_online_div() {
$(".input_item").css("display","block");
$(".input_item_offline").css("display","none");
$(".online_button").css({'background-color':"blue"});
$(".offline_button").css({'background-color':"#5bc0de"});
}

function show_offline_div() {
$(".input_item").css("display","none");
$(".input_item_offline").css("display","block");
$(".online_button").css({'background-color':"#5bc0de"});
$(".offline_button").css({'background-color':"blue"});
}

function add_no() {
// 加载ORT/LLT_NO.列表
$.ajax({
type: 'GET',
url: '/get_NO/',
data: {},
success: function (data) {
if(data['status'] === 1){
var list1 = data['list'];
for (var i =0; i < list1.length; i++){
var op = document.createElement("option"); // 新建OPTION (op)
op.appendChild(document.createTextNode(list1[i])); // 设置OPTION的 TEXT
// document.getElementById('ORT_LLT_NO').appendChild(op);
console.log(op,op.text);
$('#ORT_LLT_NO').append(op);
}
}
else if (data['status'] === 0){
swal({
title: '错误！',
text: '加载ORT/LLT_NO.失败！',
type: 'error'
})
}
else{
swal({
title: '错误！',
text: '加载ORT/LLT_NO.异常！',
type: 'error'
})
}
}
})
}

function add_sn() {
//加载对应ORT/LLT_NO下的所有sn
$("#ORT_LLT_NO").change(function() {
var NO = document.getElementById('ORT_LLT_NO').value;
// var k = document.getElementById('SN');
$('#SN').empty();
$.ajax({
type: 'GET',
url: '/get_sn/',
data: {'NO': NO},
success: function (data) {
if (data['status'] === 1) {
var list = data['list'];
for (var j = 0; j < list.length; j++) {
var op1 = document.createElement("option"); // 新建OPTION (op)
op1.appendChild(document.createTextNode(list[j])); // 设置OPTION的 TEXT
op1.value = list[j];
// console.log(op1,op1.text);
$('#SN').append(op1);
var a = document.getElementById('SN').getElementsByTagName('option');
for(var i = 0; i<a.length; i++){
console.log(i,a[i].value);
}
}
// console.log('ok');
}
else if (data['status'] === 0) {
swal({
title: '错误！',
text: '加载ORT/LLT_NO.失败！',
type: 'error'
})
}
else {
swal({
title: '错误！',
text: '加载ORT/LLT_NO.异常！',
type: 'error'
})
}
},
error: function () { alert('ooooooooo');}
})
});
}


CSS：
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
height: 100%;
background: url("../images/11.jpg") 0 0 no-repeat scroll transparent;
background-size:cover;
background-position: center;
/*border: 1px solid red;*/
}
.title{
width: 100%;
text-align: center;
color: blue;
font-size: 25px;
margin-top: 20px;
}
.title1{
text-align: center;
color: blue;
width: 120px;
font-weight: bold;
}
.main{
/*border: 1px solid red;*/
}
.main_button{
width: 100%;
font-size: 1.3vw;
}
.padding0{
/*padding: 0;*/
}
.main_item{
margin-top: 2.5vh;
font-size: 1vw;
border: 1px solid blue;
}
.main_input{
/*width: 100%;*/
width: 180px;
height: 40px;
border-radius: 5px;
}
.main_label{
height: 100%;
}
.content{
width: 400px;
height: 500px;
margin-left: -200px;
margin-top: -250px;
left: 50%;
top: 50%;
position: absolute;
background-color: #3c5277;
border-radius: 20px;
/*border: 1px solid red;*/
}
.online_button{
width: 150px;
height: 30px;
margin-left: 50px;
background-color: blue;
}
.offline_button{
width: 150px;
height: 30px;
/*margin-left: 100px;*/
}
.temperature_button{
width: 100px;
height: 30px;
}
.input_item{
width: 305px;
height: 350px;
margin-left: 50px;
/*border: 1px solid green;*/
}
.item{
/*border: 1px solid blue;*/
margin-top: 50px;

}
.input_item_offline{
width: 305px;
height: 350px;
margin-left: 50px;
/*border: 1px solid green;*/
display: none;
}
.input_item_temperature{
width: 305px;
height: 350px;
margin-left: 50px;
/*border: 1px solid green;*/
display: none;
}

.span1{
/*height: 42px;*/
padding-top: 0;
padding-bottom: 0;
}

.input_label{
width: 120px;
text-align: center;
font-size: 15px;
line-height: 33px;
border-radius: 5px;
color: white;
/*background-color: whitesmoke;*/
}
.alert_div{
width: 150px;
height: 40px;
float: left;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
...全文
973 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
yepp13 2019-04-19
  • 打赏
  • 举报
 回复
引用 1 楼 丰云的回复:
var op = document.createElement("option"); // 新建OPTION (op) op.appendChild(document.createTextNode(list1[i])); // 设置OPTION的 TEXT // document.getElementById('ORT_LLT_NO').appendChild(op); console.log(op,op.text); $('#ORT_LLT_NO').append(op); ==>> $('#ORT_LLT_NO').append('<option>list1[i]</option>'); 不要那么哆嗦。。。用jquery，就好好用jquery, 怎么简洁怎么来
$('#ORT_LLT_NO').append('<option>' +list1[i]+'</option>') 要这么写 大佬说的对，确实要怎么简洁怎么写，不过因为是新手，有些可能不会😊 但我改了还是不显示呢。。。
丰云 2019-04-19
  • 打赏
  • 举报
 回复
var op = document.createElement("option"); // 新建OPTION (op) op.appendChild(document.createTextNode(list1[i])); // 设置OPTION的 TEXT // document.getElementById('ORT_LLT_NO').appendChild(op); console.log(op,op.text); $('#ORT_LLT_NO').append(op); ==>> $('#ORT_LLT_NO').append('<option>list1[i]</option>'); 不要那么哆嗦。。。用jquery，就好好用jquery, 怎么简洁怎么来
yepp13 2019-04-19
  • 打赏
  • 举报
 回复
找到问题了，是bootstrap-select这个插件加载option后要刷新
yepp13 2019-04-19
  • 打赏
  • 举报
 回复
没有断点调试，但我有打印，抓取select的#SN的option打印出来都有了，但就是不显示，上面一个select有显示的
丰云 2019-04-19
  • 打赏
  • 举报
 回复
不是因为样式的原因，下来选项被遮档了？
丰云 2019-04-19
  • 打赏
  • 举报
 回复
断点调试了吗？ 是否准确执行了？ 页面下拉框是否显示出来了？
轻量级sass平台如何使用Django快速搭建_第二部分
全套视频是基于django开发的Bug管理平台，为用户提供理想的工作云平台，涵盖了众多企业级功能，便捷的团队协作，轻量的项目管理， 完备的问题系统，大容量的文件存储等，大大提升了工作效率。项目涵盖技术和知识点概览：1. 注册、登录、手机短信、图片验证码、redis超时 等企业用户认证。2. git版本控制、local_settings配置管理、virtualenv虚拟环境。3. ModelForm扩展核心应用 & 自定义widget插件 & OOP多继承实现BootStrap应用。4. django离线脚本处理。5. 腾讯对象存储COS应用及文件多级目录控制。6. wiki平台和markdown组件定制。7. 生成器和可迭代对象的应用并实现组合搜索。8. 集成多个插件 datetimepicker.js /  select2 / daterangepicker.js / highcharts / bootstrap-select.js。9. 支付宝支付 和 优惠抵扣。学完本课，你可以掌握用Django开发企业级web应用的技能
Bootstrap js动态给select添加option元素不显示
问题起因 本人在使用Bootstrap过程中，用js动态给select元素添加option元素时没有显示，在for循环获取option数据时，是能获取的，但是就是显示不出来，只有当人为的去刷新此页面后才可以显示，这对用户来说很不友好，故从网上查找解决办法。 解决方法 在获取完option数据后添加以下两句，即可在进行数据的更改后可以更新select选项 //要以编程方式更新JavaScript的选...
下拉列表select动态添加option和获取选中的option的值和value
/动态的往select里面添加option(JS方式添加)两种方法获取选中的option的值和value。//拿到选中的option的value。//拿到选中的option的value。3、获取选中option的value。2、获取选中option的value。//Jquery动态添加option。//拿到选中的option的text。//拿到选中的option的text。2、获取选中的option的索引值。4、获取选中option的text。3、获取选中option的text。
bootstrap的select动态添加option时无法正常显示
bootstrap的select动态添加option时无法正常显示
js中动态给select添加option的两种方法(制作下拉列表)
js中可以动态的给select添加option，下面来看看常用的两种方法 一、通过appendchild来动态添加option 二、通过options.add(string，value)添加option
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章