js中的下拉框（js怎么添加一个下拉列表的值）

本文目录

• js怎么添加一个下拉列表的值
• js设置下拉框不可编辑
• 如何用JS选中下拉框选项
• js实现两个下拉框联动
• 如何在js中下拉列表选中某个值
• js如何获取下拉框选中项的文本
• 如何使用JS获取下拉列表框的显示值
• 如何用js实现下拉框中selected

js怎么添加一个下拉列表的值

javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

实例演示如下：

1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。

此时的显示效果如下，其中option中有三项。

2、JS的函数设计如下：

现有的options如下：

3、在页面上输入新的数据，点击添加。

此时的select效果显示如下，自由添加功能实现。

js设置下拉框不可编辑

javascript设置输入框不可的方法：
1、使用disabled属性设置：disabled属性规定应该禁用input元素，被禁用的input元素既不可用，也不可点击。可以设置disabled属性，直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后，就需要通过JavaScript来删除disabled值，将input元素的值切换为可用。disabled属性无法与一起使用。
2、使用readonly属性设置：readonly属性规定输入字段为只读，只读字段是不能修改的。不过，用户仍然可以使用tab键切换到该字段，还可以选中或拷贝其文本。readonly属性可以防止用户对值进行修改，直到满足某些条件为止(比如选中了一个复选框)。然后，需要使用JavaScript消除readonly值，将输入字段切换到可状态。

如何用JS选中下拉框选项

1、打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。

***隐藏网址***

2、在页面中添加一个下拉框，并在html中通过selected属性，默认选择下拉框的第2个值。

***隐藏网址***

3、在浏览器中打开页面，就可以看到这个下拉框默认选中的第二个下拉值。

***隐藏网址***

4、在页面顶部引入jquery，由于本文将jquery和页面放在同一级目录，所以，直接使用了jquery文件名引用。如果不在同一级目录，引入的路径需要有层级。

***隐藏网址***

5、在页面底部，添加jquery代码，使用.val()方法，在页面文档加载后，就马上修改下拉框的默认选中值为第三个值。此时是不管html的标签中selected属性原来是标记在哪一个选项的，都会改成新的值。

***隐藏网址***

6、在浏览器中打开页面，这个时候就会看到，下拉框的默认值已经变成了第三个选项。

***隐藏网址***

7、如果想要通过下拉框的显示值来设置默认选中项，就需要使用类似下面的语法：

$("#sltDef").find("option:contains(’第4个选项’)").attr("selected",true);

***隐藏网址***

js实现两个下拉框联动

基本方式有以下两种：
方式1：
给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.
方式2：
菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2.

源代码你可以在百度搜索 "js下拉菜单 联动" 得到。

如何在js中下拉列表选中某个值

《select name="r_house" id="r_house"》

《option value="选项1"》选项1《/option》

《option value="选项2" selected》选项2《/option》《!--如果想直接在html中选定某项，给该项加个selected属性即可，不需要编程--》

《option value="选项3"》选项3《/option》

《option value="选项4"》选项4《/option》

《option value="选项5"》选项5《/option》

《option value="选项6"》选项6《/option》

《/select》

《script》

window.onload=function(){

   //如果一定要js代码实现，可以这样：

   //方法一（假定选定第3项，下同）：

   r_house.value="选项3";

   //方法二：

   r_house.options.selected=true;

   //方法三：

   r_house.children.selected=true;

   //方法四：

   r_house.getElementsByTagName("option").selected=true;

   //方法五：

   r_house.querySelectorAll("option").selected=true;

   //还有N多种方法此略

}

《/script》

js如何获取下拉框选中项的文本

1、双击打开HBuilder工具，新建静态页面并引入AngularJS核心文件。

2、在《body》《/body》插入一个div标签元素，然后在div标签内插入select标签元素。

3、调用AngularJS中的module和controller，初始化下拉框的值。

4、利用ID选择器设置下拉框的样式布局，设置宽度、高度、字体属性、圆角和背景渐变。

5、在select标签元素上添加ng-change事件，获取下拉框选中时的文本内容。

如何使用JS获取下拉列表框的显示值

js获取下拉列表框文本值，例如下面的HTML代码： 

《select onchange="isSelected(this.value);" id="city"》 
《option 
value="1"》北京《/option》 
《option value="2" 》上海《/option》 
《option value="2" 》广州《/option》 
《/select》

也就是说当用户选择“上海”这一列时，需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码： 

function isSelected(value) { 
var cityName; 
var city = 
document.getElementById("city"); 
//获取选中的城市名称 
for(i=0;i《city.length;i++){ 
if(city.selected==true){ 
cityName 
= city.innerText; //关键点 
alert("cityName:" + cityName); 
} 
}

也可以这样做：

function isSelected(value) { 
var city = document.getElementById("city"); 
alert(city.options.innerText); 
}

大致解释一下，首先在HTML页面上有一个下拉框，并为此下拉框定了一个“city”的id，并为其绑定了一个onchange事件，通过此事件调用javascript函数。
在javascript函数当中，通过domcument对象获取当前下拉框的节点元素，由于节点的值并非只有一个，所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中，如果选中则使用city.innerText
方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city.value.
至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city.innerText
改为 city.text即可。这种方法对IE及FIXEFOX都适用！

如何用js实现下拉框中selected

思路：设置下拉框的value属性，那么下拉框的option选项中相应value值选项就会被选中。

下面实例演示——根据文本框值设置下拉框选中项：

1、HTML结构

《select id="test"》
《option value="0"》-- please select --《/option》
《option value="1"》option-1《/option》
《option value="2"》option-2《/option》
《option value="3"》option-3《/option》
《/select》《br》
《input type="text" id="val"》《input type="button" value="设置" onclick="fun()"》

2、javascript代码

function fun(){
var val = document.getElementById("val").value;
document.getElementById("test").value = val;
}

3、效果演示