JS动态改变select的值

最新推荐文章于 2023-05-09 17:52:12 发布
最新推荐文章于 2023-05-09 17:52:12 发布
阅读量518 收藏
点赞数
分类专栏： javaScript 文章标签： JavaScript IE Firefox ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxc914/article/details/83797553
版权
document.getElementById("louyuming").options[0].selected=true;
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到 length）
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
======================================================================
动态删除select中的所有options：
function deleteAllOptions(sel){
sel.options.length=0;
}
动态删除select中的某一项option：
function deleteOption(sel,indx){
sel.options.remove(indx);
}
动态添加select中的项option:
function addOption(sel,text,value){
sel.options.add(new Option(text,value));
}
上面在IE和FireFox都能测试成功，希望以后可以用上。
===========================================
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}

// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}

// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}


// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}

// 7.设置select中value="paraValue"的Item为选中
objSelect.value = objItemValue;

// 8.得到select的当前选中项的value
var currSelectValue = objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = objSelect.selectedIndex;

// 11.清空select的项
objSelect.options.length = 0;
整个实例的完整代码如下：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" οnchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" οnclick="watch_add(this.form);" />
<input type="button" value="修改" οnclick="watch_mod(this.form);" />
<input type="button" value="删除" οnclick="watch_del(this.form);" />
<input type="button" value="保存" οnclick="watch_set(this.form);" />
</form>
</body>
</html>
lxc914
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS更改select内option属性的方法
11-24
本文实例讲述了JS更改select内option属性的方法。分享给大家供大家参考。具体如下： 帮一位友人解决了一个小问题，需求是更改选中选项卡内显示的文本值，新值存放在某个文本框内 初始窗口： <html> <head> <title>原窗口</title> [removed] var parentValue=""; //全局变量，用于保存点击详情时select中指定opeion的值 function detail() { var select=document.getElementById('SHGX'); //获得select对象 parentValu
js动态改变select选择变更option的index值示例
10-25
今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再 删除索引小的
JS设置select标签选中的值
飘然生的博客
12-11 7956
页面 "<select name=\"improveRelevantPolicies" + i + "\">" + "<option value=\"\"></option>" + "<option value=\"是\">是</option>" + "<option value=\"否\">否</option&g...
用js控制select2组件，改变所选值
最新发布
ZhiMaHuyizhi的博客
05-09 420
【代码】用js控制select2组件，改变所选值。
动态给select赋值
candy_tity的博客
03-20 8270
当点击页面中的一些元素，会改变select的值，这样的情况比较多见。代码如下：<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <style type="text/css"> sele
【js】改变radio的值动态改变下拉框（select）的值
冰冷的希望的博客
05-20 1127
1、使用到jQuery 在html文档里引入jQuery库 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 2、html代码 在html文件里新建好radio，再新建一个select，设置好option，改变radio的值则select的值也发生改变 <div class="learningType" > <input type="radio" name
js里怎么取select标签里的值并修改
10-27
在JavaScript中，获取和修改`select`标签中的值是常见的操作，特别是在动态更新表单或者交互式用户界面中。在给定的标题和描述中，我们关注的是如何找到具有特定文本或值的`option`元素，并对其进行修改。下面将详细...
javascript 动态设置已知select的option的value值的代码
10-29
在JavaScript编程中，动态设置`select`元素的`option`值是常见的需求，尤其是在用户交互或者数据更新的场景中。这个需求通常出现在用户修改页面时，我们需要根据已知的值来匹配并选中对应的`select`选项。下面将详细...
BootStrap select2 动态改变值的方法
12-02
在Web开发中，有时我们需要动态地改变Select2控件的值，这在处理用户交互或者响应服务器数据时非常常见。本文将详细介绍如何在Bootstrap Select2中实现这一功能。 首先，我们要了解如何动态赋值给Select2。在示例...
js实现form表单select里面的value值改变其他的input里面的时间日期也随之变化
zdluoyang的博客
05-21 1078
<?php //date_default_timezone_set("PRC"); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, ...
Js操作Select大全(取值、设置选中等等)
05-14
Js操作Select大全(取值、设置选中等等) Js操作Select大全(取值、设置选中等等)
js 动态新增改变删除select的值
06-23
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删， 然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到 length）
怎样用js变化select下拉员的值
I love IT
03-25 94
var message = "${message}"; if(message.length>0){ alert(message); } function showDiv(){ var type="${linkType}"; var selectValue = document.getElementById("selec...
如何通过js动态设置select中option选中
热门推荐
标哥
02-20 4万+
今天开发网站遇到一个小问题，如何动态通过js让select控件选中指定的值呢？在调试过程中，发现了amazeui这个ui组件的问题，使用它个组件的样式就无法通过selected=true设置为选中。 后来，去了官网查找了相关方法来实现，但是按照官网的代码并不能达到选中效果，最后无奈只能将样式去掉，使用HTML原有的样式，手动通过JS来实现这个功能。 解决办法 手动通过原生JS来实现：
JS获取select选中的value和内容
qq_38657283的博客
07-24 6242
 不说废话，直接上代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head...
js控制select选定项问题
sunvsjay1890的专栏
04-06 1万+
呵呵 哈哈 嘿嘿 等等 试试 测试 感觉 function aa() { var tt=document.getElementById("select").value; alert(tt); } function xx() { var kk = document.getElementById("select").options; for (var i=0; i<kk.leng
layui中如何动态改变select的选中值
JierrySun的博客
08-13 1390
layui中如何动态改变select的选中值 根据后面时间框中的时间类型为“日”，修改时间维度为“日”而非“月” 具体实现代码如下 经过上面代码的实现，发现还有一个小的问题，虽然class名称和selected属性值都已成功绑定，但是在select框内的选中值仍然没有改变。 需要再追加一行代码 $('.layui-select-title>input').val('日'); 到此完美实现功能 完整代码如下： ...
jquery动态修改表单select的option值,从而间接修改option的选中状态
10-29 6839
      &lt;!-- 通过php模板标签的方法实现option选中状态,最常用的 --&gt; &lt;select name="sex" id="sex"&gt; &lt;option value="" &gt;请选择性别&lt;/option&gt; &lt;option value="1" &lt;{if $info[
如何通过js修改select标签的值
04-05
可以通过以下方法来修改select标签的值： 1. 通过id获取select标签元素，例如： ```javascript var selectElement = document.getElementById("mySelect");...这些方法可以通过JavaScript来修改select标签的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值