正文
jquery动态下拉框,jquery动态生成下拉框
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery如何实现下拉框的二级联动？
给你一个三级联动的，你你参考一下
script language="JavaScript" type="text/javascript"
function createCode()
{
//数组赋值
var varname = new Array(4);
varname[0] = "请选择";
varname[1] = "红色";
varname[2] = "黄色";
varname[3] = "蓝色";
//下拉框赋值
for(var i=0;i4;i++)
{
document.getElementById('xlk1').options[i] = new Option(varname[i],i);
}
copy();
}
//复制下拉框一给下拉框二
function copy()
{
for(i=0;idocument.getElementById("xlk1").options.length;i++)
{
document.getElementById('xlk2').options[i] = new Option(document.getElementById("xlk1").options[i].text,i)
}
copytwo();
}
//复制下拉框一给下拉框二
function copytwo()
{
for(i=0;idocument.getElementById("xlk2").options.length;i++)
{
document.getElementById('xlk3').options[i] = new Option(document.getElementById("xlk2").options[i].text,i)
}
}
function onChange1()
{
//获取下拉框1的选中项
var strid=document.getElementById("xlk1").value;
//获取选中项的内容
//var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;
//获取指定ID下拉框的项总数
//var strnub=document.getElementById("xlk1").options.length;
copy();
if(strid != 0)
{
document.getElementById("xlk2").options.remove(strid);
document.getElementById("xlk3").options.remove(strid);
}
document.getElementById("textfield").value=strid+strtxt+strnub;
}
function onChange2()
{
//获取下拉框1的选中项
var strid2=document.getElementById("xlk2").selectedIndex;
//获取选中项的内容
var strtxt2=document.getElementById("xlk2").options[window.document.getElementById("xlk2").selectedIndex].text;
//获取指定ID下拉框的项总数
var strnub2=document.getElementById("xlk2").options.length;
copytwo();
if(strid2 != 0)
{
document.getElementById("xlk3").options.remove(strid2);
}
}
/script
body onLoad="createCode()"
form id="form1" name="form1" method="post" action=""
select name="xlk1" id="xlk1" onChange="onChange1()"/select
select name="xlk2" id="xlk2" onChange="onChange2()"/select
select name="xlk3" id="xlk3"/select
/form
相关问答
Q1: 利用JQuery动态获取下拉框的值，在jsp页面上显示。
select id="selects"
option value="0" selected1/option
option value="1"1/option
option value="2"2/option
/select
div id="result"/div
--------------------------------------------------------
$("#selects").change(function(){ //下拉框改变时取得值
$("#result").html($(this).val()); //显示值
});
Q2: jquery动态添加下拉栏，怎么去避免重复添加
1、确定当前需要添加元素的text以及对应的value
2、获取当前下拉框中所有的option元素数组optionArr，可以通过$('#citySelect option')获取元素集合。
3、遍历optionArr，判断需要添加的text或者value是否和optionArr相同，相同则不添加，没有重复则添加。
示例：
select id='citySelect'
option value='beijing'北京/option
option value='shanghai'上海/option
/select
方法：
script
function addCity(value, text){
var optionArr = $('#citySelect option');
for(var i=0;ioptionArr.length;i++){
if(optionArr[i].text == text || optionArr[i].value == value){
return false;
}
}
var addOption = "option value='" + value + "'" + text + "/option";
$('#citySelect').append(addOption);
}
/script
Q3: “jquery”中怎么让下拉框不能选择？
使用jquery动态的设置下拉框不能选择可以使用jquery的attr方法给select控件添加disabled属性，由于即使是被禁止选择了，下拉框还是会显示白色，这样可能会让用户产生 误解，可以再加上一个灰色的背景色，具体实现代码如下：
HTML
!DOCTYPE html
html
head
meta charset="UTF-8"
title如何设置select下拉禁止选择/title
script src="../js/jquery-1.12.4.js"/script
script
$(function(){ });
/script
/head
body
select id="sel"
option value="1"项目经理/option
option value="2"总经理/option
option value="3"技术经理/option
option value="4"部门经理/option
/select
/body
/htmlJavaScript
$("#sel").attr("disabled","disabled").css("background-color","#EEEEEE;");
效果图：
Q4: 关于jquery动态创建easyui下拉框控件
textarea和select的jquery的clone方法有问题，textarea和select的值clone的时候会丢掉，这个是jquery的一个bug,网上有一个插件，下载地址如下：。就是在clone的时候将val再重新赋值一下，也可以不用这个插件，自己写。
Q5: jquery动态加载select下拉框，如何做到每次点击下拉框都保证是最新的数据？
1、点击#ca时，检查有没有options_loaded=1，有就不再发起ajax请求了。没有的话：
2、发起ajax请求获取最新数据。
3、追加option前先清空所有options。
4、追加后，给#ca元素添加属性options_loaded=1。
