关于 select 下拉框的 new Option()

于 2021-09-01 17:22:53 发布
阅读量960 收藏 5
点赞数
文章标签： ajax javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaotumo/article/details/120044601
版权
该篇博客介绍了如何利用JavaScript的$.ajax方法从服务器获取数据，并遍历数据创建HTMLOptionElement对象。通过newOption方法生成option元素，将数据绑定到下拉框中，同时根据条件设置默认选中项。最后使用layui.form.render刷新渲染，确保UI更新。
摘要由CSDN通过智能技术生成

这是 Option 源代码

declare var Option: {
    new(text?: string, value?: string, defaultSelected?: boolean, selected?: boolean): HTMLOptionElement;
};

通过第四个selected 属性来设置默认选中

$.ajax({
      type: "get",
      url: urlRootPrefix+'/tbCwVouchers/tbCwItems',
      success:function(data){
        $.each(data.data,function (index,item) {   //循环后台返回的json数据
          //new Option方法是新建一个option，第一个参数是需要显示的值，第二个参数是option的value值,然后append到下拉框中。
          $('.subject').append(new Option(item.subjectId+"  "+item.subjectName,item.subjectId,true,subjectId == item.subjectId));
        })
        layui.form.render("select");
        //console.log(data.data)
      }
    });

最后的效果
在这里插入图片描述

加油加油加油

xiaotumo
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery之new Option(） 二联动、三联动、四联动菜单（part1）
Super Livia
03-11 1751
今天看了一個很有意思的屬性，在日常中也可以用到，也有很多人寫過，自己也來總結一下。 基本內容解說： 1:add() 方法用于向 <select> 添加一个 <option> 元素。 2:new Option() 创建一个option标签 3:Two.options.add(twoop, null);最後輸出要這樣寫才正確喲！ 4：new Option(i,i...
layui 动态添加Select下拉框的option项
magezhitu的博客
06-14 1075
工作中用到了，到这里记录一下 先是写一个select标签 <select name="interest-search" id="test" lay-verify="required"> <option>请选择</option>//这里写一个option是为了给下拉项一个默认选择项 </select> 然后在js中通信后进行动态赋值，这里贴上关键代码 for (var i = 0; i < textlist.length; i++) { $(
new Option 的参数问题
蛰伏神兽的专栏
05-01 4818
写二级联动菜单时，js里一般要用到New Option()，而且一般都是里面呆两个参数，第一个是显示的文本，第二个是value值。之前做的二级联动的时候，在“修改文章”的操作时，一般都是把二级类别以文字的方式显示出来，然后在二级联动后面写一句提示“不改请不要动”了事，没有细细追究过究竟要怎么解决。昨天做的一个活，要求可能选类别，也可能不选类别，如果添加时选了某一类，而修改时希望不选类别，那么我之前
new option(text, value, defaultSelected, selected);
清箫的专栏
12-22 5052
语法:      new Option(text, value, defaultSelected, selected) 说明:      The Option constructor or the HTML tag. To create an Option object with its constructor:           Once youve created an Option ob
new Option()——实现时间联动
weixin_34372728的博客
06-09 101
1、基础准备： 　　先来了解下，如何运用js实现select动态添加option。 //1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendCh...
new option
weixin_33827965的博客
09-15 107
new option(text,value,defaultSelected,selected) text:字符串，指定option对象的text属性(即<option></option>之间的文字) value:字符串，指定option对象的value属性 defaultSelected:布尔值，指定option对象的defaultSelected属性 返回...
JS操作select下拉框动态变动(创建/删除/获取)
10-27
标题所指的知识点是关于使用JavaScript来动态地操作HTML中的select下拉框元素，包括创建和删除select元素本身，以及对select元素中的option选项进行添加、删除、获取和修改等操作。以下是各知识点的详细说明： 1. ...
Javascript select下拉框操作常用方法
10-29
ctl.options[ctl.options.length] = new Option(text, value); } } ``` 4. 删除所有选项： 通过设置下拉框的 `options.length` 为0，可以删除所有选项。 示例代码： ```javascript function ...
JavaScript实现将数组数据添加到Select下拉框的方法
10-23
总结来说，JavaScript 实现数组数据添加到 Select 下拉框的方法，涉及到数组操作的基础知识，包括如何声明数组、获取数组长度、遍历数组以及创建 Option 对象。同时，还需要掌握通过 JavaScript 动态修改 HTML 页面...
js之new Option
xclsky的博客
12-28 4693
1 通过js方法，动态的为下拉框select标签来增加内容。通过new Option(text,value)来执行。 如： js方法： var num=0; function btn_btn2_click(){  var obj=document.getElementById("select1");  var text="text"+num;  var value="valu
layui select动态添加option的实例
08-27
下面小编就为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
new Option及用法
llwan的专栏
02-24 1万+
op.sclassnumber.options.add(new  Option(secondMenuClassNumber[0]+":"+secondMenuText[0]),secondMenuClassNumber[0]); //==================== new option(text,value,defaultSelected,selected) text:字符串，指定
关于new Option()
weixin_30301449的博客
01-21 173
先来了解下，如何运用js实现select动态添加option。 //1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelec...
select下拉框动态添加option选项
qq_41615323的博客
02-26 2669
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>select动态添加option</title> </head> <body> <select id="test"></select> </body> <script src="https://cdn.bootcss.c
new Option()方法
技术收藏
10-12 2238
  var option = new Option( "abc", "2312" ); document.all.s.options[0] = option; var option2 = new Option( "def", "2312" ); document.all.s.options[1] = option2; //--> Option是 select 中的选择项,str1 是页面
new Option()函数的作用
热门推荐
hhthwx的博客
09-18 2万+
在做三级联动的时候遇见了这个函数，对函数的用法进行一下小总结，不太详细，敬请谅解。作用：用于创建一个新的选项Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选.虽然这个构造函数会创建一个Object的实例，但是兼容DOM的浏览器会返回一个<option>元素。我们依然可以使用appendChild()将新的选项加到选择框中。例如：var newOption =
new Option那些事
scholar_wang的博客
08-06 265
Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选.虽然这个构造函数会创建一个Object的实例，但是兼容DOM的浏览器会返回一个元素。我们依然可以使用appendChild()将新的选项加到选择框中。例如： var newOption = new Option(“Option text”,“Option value”); selectbox.appendCh...
new Option(） 联动菜单
迷失的鱼的博客
03-07 1251
//add() 方法用于向 &lt;select&gt; 添加一个 &lt;option&gt; 元素。 //new Option() 创建一个option标签 school.add(new Option('北京大学1')) &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&g...
new Option()函数，以及HTML DOM setAttribute() 方法
Charminglsy的博客
06-12 1322
HTML DOM setAttribute() 方法 实例： 设置 input 元素的 type 属性： document.getElementsByTagName(“INPUT”)[0].setAttribute(“type”,“button”); <!DOCTYPE html> <html> <body> <input value="OK"> ...
elementUi中select下拉框触底加载下一页
最新发布
06-02
要实现下拉框触底加载下一页，可以使用 `element-ui` 的 `el-select` 和 `el-option` 组件结合 `scroll` 事件来实现。具体操作如下： 1. 在 `el-select` 组件中添加 `@scroll.native` 事件，绑定一个方法，用于监听下拉框的滚动事件。 2. 在绑定的方法中，判断下拉框是否滚动到底部，如果滚动到底部，则触发加载下一页的方法，并将下一页的数据添加到选项中。 3. 在 `el-option` 组件中添加一个指令 `v-if`，用于判断当前选项是否需要显示。当选项数据为空时，不显示该选项。 下面是一个示例代码： ```html <template> <el-select v-model="value" @scroll.native="handleScroll" :filterable="filterable"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" v-if="option.label !== 'loading'"></el-option> <el-option v-if="loading" label="loading"> <template #loading> <i class="el-icon-loading"></i> </template> </el-option> </el-select> </template> <script> export default { data() { return { value: '', options: [], loading: false, filterable: true, page: 1, }; }, methods: { handleScroll(e) { const container = e.target; const scrollHeight = container.scrollHeight; const offsetHeight = container.offsetHeight; const scrollTop = container.scrollTop; if (scrollTop + offsetHeight >= scrollHeight && !this.loading) { this.loading = true; this.loadNextPage(); } }, async loadNextPage() { // 模拟异步加载数据 await new Promise((resolve) => setTimeout(resolve, 1000)); const nextPage = this.page + 1; const newOptions = Array.from({ length: 10 }, (_, index) => ({ label: `Option ${nextPage}${index + 1}`, value: `option${nextPage}${index + 1}`, })); this.options = this.options.concat(newOptions); this.page = nextPage; this.loading = false; }, }, }; </script> ``` 这样，当下拉框滚动到底部时，就会触发加载下一页的方法，并将下一页的数据添加到选项中，从而实现了下拉框触底加载下一页的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值