求代码，来解决两个下拉框的联动

panzhixiong_cn 2012-10-31 11:17:07
我有两个下拉框，分别为：
下拉框一
<select onchange="A(this)" name="STy1" id="STy1" size="1"><option value="sn" selected="true">Family/Last Name</option><option value="cn">Full Name</option><option value="id">ID</option></select>

和下拉框二
<select name="SLk1" id="SLk1" size="1"><option value="OBW">That Begins With</option><option value="OOS">That Contains</option><option value="OEM">That Equals</option></select>


我现在想知道怎么写js的function A(obj)，来实现以下功能。
1）选中下拉框一的ID，下拉框二中就只剩“That Equals”选项。
2）选中下拉框一的“Family/Last Name”或者“Full Name”，下拉框二中所有选项都可选，默认选中“That Begins With”。

非常感谢！
...全文
188 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq137051908 2012-10-31
  • 打赏
  • 举报
 回复 
<html>

<head>

    <title>demo</title>

</head>

<body>

    <select onchange="A(this)" name="STy1" id="STy1" size="1">

        <option value="sn" selected="selected" show="OBW,OOS,OEM" defvalue="OBW">Family/Last Name</option>

        <option value="cn" show="OBW,OOS,OEM" defvalue="OBW">Full Name</option>

        <option value="id" show="OEM" defvalue="OEM">ID</option>

    </select>

    <select name="SLk1" id="SLk1" size="1">

        <option value="OBW">That Begins With</option>

        <option value="OOS">That Contains</option>

        <option value="OEM">That Equals</option>

    </select>

    <script type="text/javascript">

        var Ori = {

            STy1: "STy1",

            SLk1Id: "SLk1",

            SLk1: [],

            Init: function() {

                var obj = document.getElementById(this.SLk1Id);

                var list = [];

                if (obj) {

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

                        list[i] = { text: obj.options[i].text, value: obj.options[i].value };

                    }

                    this.SLk1 = list;

                    A(document.getElementById(this.STy1));

                }

            },

            Show: [],

            ShowDefIndex: 0,

            SetShow: function() {

                var obj = document.getElementById(this.SLk1Id);

                if (obj) {

                    obj.options.length = 0;

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

                        obj.options[i] = new Option(this.Show[i].text, this.Show[i].value);

                    }

                    obj.selectedIndex = this.ShowDefIndex;

                }

            }

        };

        function A(obj) {

            var show = obj.options[obj.selectedIndex].getAttribute("show");

            var defvalue = obj.options[obj.selectedIndex].getAttribute("defvalue")||"";

            if (show) {

                Ori.ShowDefIndex = 0;

                show = show.split(",");

                Ori.Show.length = 0;

                var index = 0;

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

                    for (var j = 0; j < Ori.SLk1.length; j++) {

                        if (Ori.SLk1[j].value == show[i]) {

                            if (defvalue == show[i]) {Ori.ShowDefIndex = index; }

                            Ori.Show[index] = { text: Ori.SLk1[j].text, value: Ori.SLk1[j].value };

                            index++;

                            continue;

                        }

                    }

                }

                Ori.SetShow();

            }

        }

        window.onload = function() {

            Ori.Init();

        };

    </script>

</body>

</html>

以前用的时候写了一个,拿来改了下,可以满足楼主的需求
Go 旅城通票 2012-10-31
  • 打赏
  • 举报
 回复 
<select onchange="A(this)" name="STy1" id="STy1" size="1">

<option value="sn" selected="true">Family/Last Name</option>

<option value="cn">Full Name</option>

<option value="id">ID</option>

</select>

<select name="SLk1" id="SLk1" size="1">

<option value="OBW">That Begins With</option>

<option value="OOS">That Contains</option>

<option value="OEM">That Equals</option></select>

<script type="text/javascript">

    var opt = [];

    function A(obj) {

        var sel = document.getElementById('SLk1');

        if (obj.value == 'id') {

            if (opt.length == 0) { opt[0] = sel.options[0]; opt[1] = sel.options[1]; } //存储起来，IE不支持option的style="display:none"

            //删除1,2项

            sel.removeChild(sel.options[0]); 

            sel.removeChild(sel.options[0]);

        }

        else if (sel.options.length == 1) { //重新添加1,2项

            sel.insertBefore(opt[0],sel.options[0]);

            sel.insertBefore(opt[1], sel.options[1]);

            sel.selectedIndex = 0;

        }

    }

</script>
fwacky 2012-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

HTML code
<select onchange="A(this)" name="STy1" id="STy1" size="1">
<option value="sn" selected="true">Family/Last Name</option>
<option value="cn">Full Name</option>
<option value="id">ID</option>……
[/Quote]

简明 ，不错！
AlexMoonshadow 2012-10-31
  • 打赏
  • 举报
 回复
function setfillGroupId(val)
{
$.ajax({
type: "post",
url: "/yoblhtjfx/queryArea.action",
data: "parm="+val+"&jsoncallback=?",
dataType: "json",
success: function(json){
var list = json.list;
$("#inUnitAreaId").empty();
$("#inUnitAreaId").prepend("<option value=''>请选择</option>");
for(var i=0;i<list.length;i++)
{
$("#inUnitAreaId").append("<option value='"+list[i][0]+"'>"+list[i][1]+"</option>");
}
}

});


}

给你一个我的，里面的乱码是没改字符集，不影响你，相信你看的懂，只不过我去后台查了一遍数据，你的就简单啦，不用查直接写上去就行了，你说的选中的那个直接加个selected属性就行了，记得引入jquery的js。
hitytt 2012-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

上个帖子里面两处兼容性没有处理：
sel.options[0] = opt[n]; =》 sel.appendChild(opt[n]);
sel.options[i] = opt[i]; =》 sel.appendChild(opt[i]);
爱T 2012-10-31
  • 打赏
  • 举报
 回复
不过，经这三个方法，貌似又学到了东西。。。。谢了
爱T 2012-10-31
  • 打赏
  • 举报
 回复
都写的比较复杂，完全可以再写简单些
hitytt 2012-10-31
  • 打赏
  • 举报
 回复
下面的方法可以保留下拉菜单的任意项，或者选中任意项


<body>

	<select  name="STy1" id="STy1" size="1">

		<option value="sn" selected="true">Family/Last Name</option>

		<option value="cn">Full Name</option>

		<option value="id">ID</option>

	</select>

	<select name="SLk1" id="SLk1" size="1">

		<option value="OBW">That Begins With</option>

		<option value="OOS">That Contains</option>

		<option value="OEM">That Equals</option>

	</select>



	<script type="text/javascript">

	(function(){

		

		//存储可变下拉框选项

		var opt = [],

		

		//存储可变下拉框对象

			sel = document.getElementById('SLk1');

		

		//将可变下拉框中的选项存入数组中

		(function(){

			var i = 0;

			while (opt.length != sel.length){ 

				opt[i] = sel.options[i]; 

				i++;

			} 

		})();

		

		//当选中项发生变化时，调用处理函数

		document.getElementById("STy1").onchange = function(){

			A(this, 2,1);

		};

   

		//obj下拉对象，n为选择"id"后的剩余项下标，selectedN为被选中项下标（下标从0开始）

		function A(obj,n,selectedN) {

        

			//选中项为Id是，将所有项删除，添加剩余项

			if (obj.value == 'id') {

			

				while(sel.length){

					sel.removeChild(sel.options[0]);

				}				

				sel.options[0] = opt[n];

			

			}

			

			//加载所有项

			else if(sel.length == 1){ 

				sel.removeChild(sel.options[0]);

			

				(function(){

			

					var i = 0;

					while(sel.length != opt.length){

						sel.options[i] = opt[i];

						i++;

					}

				})();

			

				sel.options[selectedN].selected = "selected";

			}

			

			//选中项

			else{

				sel.options[selectedN].selected = "selected";

			}

		}

	})();

</script>

</body>
asp利用json的两个下拉框联动示例代码
asp利用json的两个下拉框联动示例代码,具体说明请看
http://blog.csdn.net/aspgreener/archive/2007/09/13/1783834.aspx
wpf comboBox 下拉框全国地址联动
wpf comboBox 下拉框全国地址联动 的整个项目代码
中国省市两级联动下拉框
自己一时兴起写的，第一次上传资源，不是为了赚分，主要是让大家对我评评分，觉得好的，可以拿去研究或使用，那是我的荣幸，觉得不好的，请不吝赐教，我对性能方面没什么研究，我只是觉得这样写，js文件会稍微小一点
C#省份城市下拉框联动简单实现方法
本文实例讲述了C#省份城市下拉框联动简单实现方法。分享给大家供大家参考。具体分析如下： 代码如下://定义字典 Dictionary Address = new Dictionary(); void loadData() {    //这是你要添加的数据   //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了     Address.Add(“绵阳”, “四川”);     Address.Add(“成都”, “四川”);     Address.Add(“广汉”, “四川”);     Address.Add(“南京
无限级联动下拉菜单 V1.03
强大的无限级联动下拉菜单类为您建站提供相当的便利条件，特点如下： 一、代码简练，通俗易懂，严格测试。 二、多级别，多数量联动，不局限于2级或3级联动。 三、一拖多，一个改变，多个跟着改变。 四、本程序在(Win2003平台)ie6 ie7 opera9 firefox3 chrome0.2 safari3.1下测试通过。 五、可轻松整合各大著名CMS，如帝国等，方便自定义模型的扩展。 备注：内置两个数据JS，一个全国城市省市地区数据，一个人才网站的职位类别职位名称数据。
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章