`
microjava
  • 浏览: 318705 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js增加、删除下拉框选项值

 
阅读更多
下拉框去掉重复值 
Array.prototype.unique = function() {  
    var data = [];  
    var a = {};
    for (var i = 0; i < this.length; i++) {  
        if(!a[this[i]]){  
            a[this[i]] = true;  
            data[data.length] = this[i];  
        }  
    }  
    return data;  
};  

var subTpye2_option = document.form_deposit.subTpye2;
var data1 = [];
var data2 = [];

for (var i = 0; i < subTpye2_option.length; i++) {  
        data1[i] = subTpye2_option[i].value;  
        data2[i] = subTpye2_option[i].text;
    } 

data1 = data1.unique();
data2 = data2.unique();

document.form_deposit.subTpye2.length = 0;
for (var i = 0; i < data1.length; i++) {  
  var obj;    
  obj=document.createElement("option");   
  obj.value=data1[i];    
  obj.text=data2[i];    
  document.form_deposit.subTpye2.add(obj);  
}



<html>
<head>
<script language="javascript" type="text/javascript">
function selectType(sid){ 
var se=document.getElementById(sid);
var option=se.getElementsByTagName("option");
var temp;

for(var i=0;i<option.length;++i) 
{ 

if(option[i].selected)
{
temp = option[i].text;
}

}

alert(se.value); 
alert(temp)

}
</script>
</head>
<body>

<select id="s1" onchange="selectType('s1')" >
<option select >选择类别</option>
<option name="typeId" value="01" >第一个</option>
<option name="typeId" value="02" >第二个</option>
<option name="typeId" value="03" >第三个</option> 
<option name="typeId" value="01" >第一个</option>
<option name="typeId" value="02" >第二个</option>
<option name="typeId" value="03" >第三个</option> 
 <select>
</body>

<script>

Array.prototype.unique = function() {  
    var data = [];  
    var a = {};
    for (var i = 0; i < this.length; i++) {  
        if(!a[this[i]]){  
            a[this[i]] = true;  
            data[data.length] = this[i];  
        }  
    }  
    return data;  
}; 

alert('hello world');

var se=document.getElementById('s1');
var option=se.getElementsByTagName('option');

alert('zz: ' + option.length);

var data1 = [];
var data2 = [];

for (var i = 0; i < option.length; i++) {  
        data1[i] = option[i].value;  
        data2[i] = option[i].text;
    } 

alert(data1);

data1 = data1.unique();
data2 = data2.unique();

alert(data1);
alert(data2);

document.getElementById('s1').length = 0;
   
for (var i = 0; i < data1.length; i++) {  
  var obj;    
  obj=document.createElement("option");   
  obj.value=data1[i];    
  obj.text=data2[i];    
  document.getElementById('s1').add(obj);  
}  
</script>

<html>


复选框 
checkAll(this, 'checkbox71');

checkItem(this, 'checkbox83');


Select_checkbox();


<script>  
//复选框赋值
function Select_checkbox()
{
  var m=0;
  var t=''; 
  var check =  document.getElementsByName('checkbox71');
      document.getElementById('BkCustType').value = '7';
      document.getElementsByName('BkCustType').value='7';
  for(var i = 0; i < check.length; i++)
   { 
     if(check[i].value=='1')
      {
        m = m + 1;
      }
       t = t + check[i].value;

    }
    // document.getElementById('Total_Records').value = check.length;
     document.getElementById('Identified_num').value = m;
    document.getElementById('Type_Flag').value = t;
}

//复选框全选和取消切换
function checkAll(e, itemName)
{
  var aa = document.getElementsByName(itemName);
  for (var i=0; i<aa.length; i++)
   {
    aa[i].checked = e.checked;
    if(aa[i].checked == true) aa[i].value = '1';
    else aa[i].value = '0';
   }
}
function checkItem(e, allName)
{
  var all = document.getElementsByName(allName)[0];
  if(!e.checked)
   {
     all.checked = false;
     e.value = '0';
   }
  else
  {
     e.value = '1';
    var aa = document.getElementsByName(e.name);
    for (var i=0;i<aa.length; i++)
     if(!aa[i].checked) return;
        all.checked = true;
  } 
    
}


</script>


和当前日期比较 
var now = new Date();
var arrStart = document.@FormName@.start1.value.split('-');
var startDt = new Date(arrStart[0],parseInt(arrStart[1],10)-1,arrStart[2]);

if(startDt.getTime() > now.getTime())
{
 return '最近风险评估日期不可大于当前日期';
}


js数字类型操作 
<script type="text/JavaScript">  
function  print_selection_ZQ_F8_919432_01()
{
   var linenum = document.form2.linenum.value;
   var pagenum = document.form2.pagenum.value;
   
   var flag = parseInt(pagenum)%2;
   
   if(flag == '1')
   {
     linenum = parseInt(linenum) + 16;
   }
   
   var prtfilename = document.@FormName@.PrintDataLocalFileName.value.split("|");
       
   //打印用户证		
   
   FmtEngine4PSBK('有线电视用户证','FMT_HOST_CLI_Public_ZQ_F8_919432_01',prtfilename[0],linenum);
   
}
</script>



<script type="text/JavaScript">  
function  print_selection_ZQ_F8_919432_01()
{
   var linenum = document.form2.linenum.value;
   
   if(parseInt(linenum) <= 10)
   {
     linenum = parseInt(linenum) + 15;
   }
   else if(parseInt(linenum) > 10)
   {
     linenum = parseInt(linenum) - 10;
   }
   
   var prtfilename = document.@FormName@.PrintDataLocalFileName.value.split("|");
       
   //打印用户证		
   
   FmtEngine4PSBK('有线电视用户证','FMT_HOST_CLI_Public_ZQ_F8_919432_01',prtfilename[0],linenum);
   
}
</script>


js日常调试 
<script>
alert('aaaaa');

var s1 = "100.00";

alert(s1);

alert(Number(s1));

if(Number(s1) < 1000)
{
   alert('s1小于1000');
}


</script>


//下拉框联动 
dwname.selectedIndex = dwcode.selectedIndex;

//位数检查 
var sfzno = document.form2.textbox86.value;
if(sfzno.length != 15 && sfzno.length != 18)
{
  return '身份证号码不合法';
}


//js控制控件属性 
if(document.form2.select74.value == '0')
{
  document.form2.textbox78.disabled = true;
  document.form2.textbox78.className='textDisabled';

}
else
{
  document.form2.textbox78.disabled = false;
  document.form2.textbox78.className='textRequired';
  document.form2.textbox78.isnotnull = 'true';
}


//ecap平台下的金额计算 

document.@FormName@.hidden120.value=document.@FormName@.number91.value;
document.@FormName@.hidden121.value=document.@FormName@.number89.value;

var s1 = document.@FormName@.hidden120.value.replace(',','');
var s2 = document.@FormName@.hidden121.value.replace(',','');


if(s1!=null && document.@FormName@.select90.value=='1')
{
  var s3 = parseFloat(s1) + parseFloat(s2);
  document.@FormName@.number88.value = s3;
}


截取字符串 
hello js

<script type="text/javascript">
alert('hello');

var kxdate = '2010-02-02';
if(kxdate != null && kxdate.length >= 10)
{
  var kxdate_1 = kxdate.substring(0,4);
  var kxdate_2 = kxdate.substring(5,7);
  var kxdate_3 = kxdate.substring(8,10);
}

var date = kxdate_1 + kxdate_2 + kxdate_3;

alert(date);

</script>



控制表格显示

document.getElementById('table_zz').style.display='';
document.getElementById('table_zz').style.display='none';

设置控件样式

document.getElementById('pzhm').className='textDisabled';



//选择下拉框回显信息 
var flag = document.form2.select53.value;

if(flag == '0140000000000000001100208') {

  document.form2.textbox61.value = '80020000005005211';
  document.form2.textbox63.value = '测试';
} else if(flag == '0140000000000000002100208') {

  document.form2.textbox61.value = '80020000005005255';
  document.form2.textbox63.value = '测试';
}

//屏蔽控件
var flag = document.form2.select81.value;

if(flag == '0') {

  document.form2.textbox67.readOnly='true';
  document.form2.textbox67.disabled='true';
  document.form2.textbox67.className='textDisabled';
  
}
else if(flag == '1') {
  alert('111111');
  document.form2.textbox67.disabled=false;
  document.form2.textbox67.readOnly='false';
  document.form2.textbox67.className='';
}



  显示和隐藏控件
  <html>
  <head>
   <body>
    <script language="javascript">
        
       function show(){
          document.form1.b3.style.display="";
          document.form1.b4.style.display=""; 
          document.form1.txt.style.display="";
       }
       
       function hid(){
          document.form1.b3.style.display="none";
          document.form1.b4.style.display="none";
          document.form1.txt.style.display="none";
       }
       
    </script>
     <form id="form1" name="form1">
        <input type="button" name="but1" value="显示" onclick="show()"/>
        <input type="button" name="but2" value="隐藏" onclick="hid()"/>
        <input type="button" name="b3" id="but3" value="Hello"/>
        <input type="button" name="b4" id="but3" value="World"/>
        <input type="text" name="txt" id="txt"/>
     </form>
   </body>
  </head>
</html>




 

  //刷新下拉框

   http://108.0.108.221:9080/TxRunAction.do?TranName=clearCache

  //修改下拉框的值

   document.@FormName@.select159.options[5].value = '0060000000000000002100209';
 
  //增加一个选项值
  var obj; 
  obj=document.createElement("option"); 
  obj.text='111'; 
  obj.value='111'; 
  document.@FormName@.select159.add(obj); 

  //删除第二个选项值
  document.@FormName@.select159.options.remove(1);

  





<html>
<head>
<script language="javascript" type="text/javascript">
function selectType(sid){ 
var se=document.getElementById(sid);
var option=se.getElementsByTagName("option");
var temp;

for(var i=0;i<option.length;++i) 
{ 

if(option[i].selected)
{
temp = option[i].text;
}

}

alert(se.value); 
alert(temp)

}
</script>
</head>
<body>

<select id="s1" onchange="selectType('s1')" >
<option select >选择类别</option>
<option name="typeId" value="01" >第一个</option>
<option name="typeId" value="02" >第二个</option>
<option name="typeId" value="03" >第二个</option> 
 <select>
</body>
<html>
分享到：
| 远程机器中转登陆脚本
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js多选下拉框多选下拉框多选下拉框

    此外，还可以使用JavaScript来动态添加或删除下拉框的选项。例如，新增一个选项： ```javascript var newOption = new Option('新选项', 'newOptionValue'); selectBox.add(newOption); ``` 或者，移除已有的选项...

    下拉框添加删除按钮

    总的来说，“下拉框添加删除按钮”是一个实用且易用的交互设计，它通过增加用户对数据的控制权，提升了界面的交互性。对于开发者来说，理解和实现这样的功能不仅可以提高项目质量，也有助于提升自己的前端技能。

    Javascript 操作select下拉框

    - `objItemValue`: 需要删除的选项值。 - **执行过程：** - 首先检查是否存在指定值的选项。 - 如果存在，则遍历 `options` 属性并删除该项。 #### 4. 删除 Select 下拉框中所有选中的项 ...

    使用JavaScript实现下拉框的动态控制

    JavaScript允许开发者在网页上执行复杂的行为，包括对HTML元素的实时操作，这使得动态更新下拉框选项成为可能。 在实际开发中，动态控制下拉框通常涉及到以下几个关键操作： 1. **清空所有选项** - 通过将下拉框...

    html最全的js javascript操作select 下拉框

    `&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分，而通过JavaScript，我们可以动态地添加、删除、移动选项，甚至调整它们的位置，从而增强用户体验和功能灵活性。 ### 一、添加`&lt;option&gt;`至`&lt;select&gt;` ####...

    Javascript下拉框

    在实际开发中，我们经常需要通过 Javascript 动态创建、操作和删除下拉框的选项，本文将详细介绍如何使用 Javascript 实现下拉框的动态操作。 动态创建 select 元素 首先，我们需要创建一个 select 元素，可以使用...

    JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动

    如果下拉框选项很多，考虑使用事件委托来提高性能，而不是为每个选项添加单独的事件监听器。同时，避免不必要的DOM操作，因为这可能会导致页面重绘，影响性能。 综上所述，实现这个功能需要扎实的JavaScript基础，...

    自写js 仿下拉框 demo

    这个"自写js 仿下拉框 demo"项目就是这样一个例子，它通过JavaScript来模仿下拉框的功能，提供了更灵活的定制性。 首先，让我们了解一下JavaScript（简称JS）的基本概念。JS是一种轻量级的解释型编程语言，主要用于...

    1.4.4.min.js版本下拉框自带模糊搜索功能实现

    在这个例子中，我们创建了一个输入框，当用户输入时，它会隐藏不匹配输入值的下拉框选项，只显示与输入值相匹配的选项。 总的来说，"1.4.4.min.js版本下拉框自带模糊搜索功能实现"涉及了JavaScript的基本操作、事件...

    combox实现的可编辑下拉框

    - **事件监听**：通过`addEventListener`方法监听用户的输入和交互，如`input`事件（检测输入框内容变化）和`change`事件（检测下拉框选项变化）。 - **函数封装**：将重复使用的代码封装为函数，提高代码复用性和可...

    javascript实现二级联动下拉框

    ### JavaScript 实现二级联动下拉框 在网页开发中，我们经常会遇到需要用户选择特定信息的情况，例如选择所在的省份和城市。为了提供更好的用户体验并简化用户的操作步骤，开发者经常使用“联动”技术来关联两个或...

    html的下拉框的几个基本用法

    在这个例子中，当用户改变选择时，会触发一个事件，获取选中的选项值并打印出来。 总结，HTML的下拉框是构建网页表单不可或缺的一部分。通过理解并熟练运用上述基本用法，你可以创建功能丰富且交互性强的表单组件。...

    下拉框的内容通过js插入到table中

    下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中，并使用`delRow`方法删除表格中的行。 首先，我们需要了解HTML的`&lt;select&gt;`元素，它是创建下拉框的主要方式。下拉框通常包含一系列`...

    网页下拉框智能诱导输入用户只要输入下拉框选项每字的第一五笔或者拼音码，诱导框就会将最先匹配的n条记录

    *　2）用户只要输入下拉框选项每字的第一五笔或者拼音码，诱导框就会将最先匹配的n条记录 * （这个参数可以配置，由MAX_MATCH_COUNT来指定）,显示在弹出框(窗口大小可以通过POPUP_WIDTH, * POPUP_HEIGHT参数设置)中...

    javascript经典特效---下拉框的新特性.rar

    通过JavaScript可以处理多选的逻辑，例如限制可选选项数量，或获取所有选中的选项值。 5. 模拟下拉框：JavaScript库如jQuery和Vue.js提供了更加灵活的组件，可以模拟出更加复杂的下拉框效果，如搜索过滤、分组选项...

    js 自定义下拉框

    在JavaScript编程中，自定义下拉框是一种常见的需求，它能够提供更加灵活和个性化的用户体验。传统的HTML `&lt;select&gt;` 元素虽然简单易用，但其样式和交互方式往往受到浏览器默认样式的限制，不能满足复杂的UI设计要求...

    javascript下拉框

    - `element.removeChild()`：删除指定的子节点，可以用于动态管理下拉框选项。 4. **AJAX与异步数据加载** - 使用XMLHttpRequest或现代浏览器的fetch API，可以在用户交互时动态加载下拉框选项，提高用户体验。 ...

    js实现的下拉框二级联动效果

    首先，定义了两个函数`removeOptions`和`setSelectOption`，用于清空下拉框选项和设置下拉框选项。`removeOptions`函数通过遍历`selectObj`（下拉框对象）的所有选项，并将其设置为`null`来清空下拉框。`...

Magicbox
Global site tag (gtag.js) - Google Analytics