1、index.html

js实现下拉选择

2、css/style.css

*{

margin: 0;

padding: 0;

}

#outDiv{

margin:100px auto;

width: 200px;

}

#outDiv span{

display:block;

height:25px;

line-height: 25px;

font-size: 13px;

padding-left: 5px;

border:1px solid;

background: url(../images/xjt.png) no-repeat right;

cursor: pointer;

}

#outDiv ul{

border: 1px solid;

border-top: none;

height: 125px;

display: none;

}

#outDiv ul li{

list-style-type: none;

height: 25px;

line-height: 25px;

padding-left: 5px;

cursor: pointer;

font-size: 13px;

}

3、js/eventUtil.js

//使用变量，类似JSON类型的js对象方式进行事件处理程序的相关逻辑封装，主要解决了浏览器兼容性问题

//单独写进js中，便于html多次进行调运

var eventUtil = {

//添加事件

addEventHandle:function(element,eventType,fn){

if(element.addEventListener){//非IE

element.addEventListener(eventType,fn,false);

}else if(element.attachEvent){//IE

element.attachEvent('on'+eventType,fn);//这里拼接上'on',调运的时候不要加on，使用click等。

}else{//不支持DOM2级，使用DOM0级方式

element['on'+eventType] = fn;//这里使用[]方式实现对象的属性添加，相当于.的作用

}

},

//删除事件

removeEventHandle:function(element,eventType,fn){

if(element.removeEventListener){//非IE,不带'on'

element.removeEventListener(eventType,fn,false);//这里传入fn，是因为DOM2级或DOM0级都可以一次给一个元素的同一个事件绑定多个程序，所以需要传入具体的程序fn进行删除

}else if(element.detachEvent){//IE,带'on'

element.detachEvent('on'+eventType,fn);

}else{//不支持DOM2级，使用DOM0级方式

element['on'+eventType] = fn;

}

},

//获取事件对象

getEvent:function(event){

return event?event:window.event;

},

//获取事件类型

getType:function(event){

event = event?event:window.event;

return event.type;

},

//获取执行事件的目标元素

getTarget:function(event){

event = event?event:window.event;

return event.target||event.srcElement;

},

//禁用默认行为

preventDefault:function(event){

event = event?event:window.event;

if(event.preventDefault){

event.preventDefault();//非IE

}else{

event.returnValue = false;//针对IE

}

},

//阻止传播冒泡

stopPropagation:function(event){

event = event?event:window.event;

if(event.stopPrapagation){

event.stopPrapagation();//非IE

}else{

event.cancelBubble = true;//针对IE

}

}

}

4、js/script.js

/**

结合鼠标和键盘事件实现下拉列表的选择，赋值过程

难点：鼠标、键盘事件的逻辑衔接

注意一点：键盘事件document.onkeyup是在txtElement.onclick事件内部的，

意味着只有点击倒三角，下拉列表显示出来，才进行键盘事件的逻辑注册

*/

window.onload = function(){

var outDiv = document.getElementById('outDiv'),

txtElement = outDiv.getElementsByTagName('span')[0];

selectUl = document.getElementById('ul'),

selectLis = selectUl.getElementsByTagName('li'),

selectIndex = -1;

//展开选择列表

txtElement.onclick = function(event){

selectUl.style.display = 'block';

eventUtil.stopPropagation(event);

//绑定键盘事件：选择列表打开的情况下，上键实现上移(38)、下键实现下移(40)、回车键(13)实现选择

document.onkeyup = function(event){

event = event?event:window.event;

var keyCode = event.keyCode;

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

selectLis[i].style.background = 'none';

}

if(keyCode == 38){//上移

if(selectIndex<=0){

selectIndex = selectLis.length-1;

}else{

selectIndex--;

}

}

if(keyCode == 40){//下移

if(selectIndex<0||selectIndex==selectLis.length-1){

selectIndex = 0;

}else{

selectIndex++;

}

}

selectLis[selectIndex].style.background = '#ccc';

//回车键选择条目并关闭列表

if(keyCode == 13 && selectIndex!=-1){

event = event?event:window.event;

txtElement.innerHTML = selectLis[selectIndex].innerHTML;

selectUl.style.display = 'none';

selectLis[selectIndex].style.background = 'none';

selectIndex = -1;

}

}

}

//关闭选择列表

document.onclick = function(){

selectUl.style.display = 'none';

}

//选择列表事件：1、移入移出背景色 2、onclick：关闭列表，给span赋值，需要阻止冒泡，因为外层div点击需要展开

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

selectLis[i].index = i;

selectLis[i].onmouseover = function(){

if(selectIndex!=-1){

selectLis[selectIndex].style.background = 'none';//清空键盘事件产生的样式

}

selectIndex = this.index;//通过鼠标事件重新设置选中索引

this.style.background = '#ccc';

}

selectLis[i].onmouseout = function(){

this.style.background = '#fff';

}

selectLis[i].onclick = function(){//这里没有阻止冒泡，是为了使用document.onclick逻辑

txtElement.innerHTML = this.innerHTML;

};

}

}

5、/images/xjt.png

今天把PHP中获取网页表单中下拉菜单变量值的方法又复习了一下

1、表单中的单选、复选、文本框等中的内容可以在PHP中直接通过$_POST["变量名"]得到。(设用POST方式)

2、如果是单选的下拉菜单，也可以通过这种方式得到。

3、但如果是复选的下拉列表，由于以下原因(摘自www.php.net)，而不能直接得到

怎样从可多选的 HTML 的 select multiple 标记中得到所有结果？

可多选的 select multiple 标记是 HTML 的一个构造，允许用户从一个列表中选择多个项目。这些项目接着被传递给该表单 action 中指定的处理程序。问题是它们都会被用同样的名字传递。例如：

每个被选项将这样被传递到表单处理程序：

var=option1

var=option2

var=option3

每个选项将覆盖前面一个$var变量的内容。解决方案是用 PHP 的“表单单元数组”特性。使用方法如下：

这将告诉 PHP 将$var当成数组对待，每个对 var[] 的赋值都会给数组增加一项。第一项将成为$var[0]，下一个是$var[1]，等等。可以用 count() 函数来测定选择了多少个项目，必要时可以用 sort() 函数来对选项的数组进行排序。

注意如果你在 java script 中通过名字来引用单元，单元名字中的[]可能会造成问题。用表单单元中的数字序号来替代，或者将变量名用单引号括起来并用其作为单元数组的索引，例如：

variable = documents.forms[0].elements['var[]'];

最后我做了以下代码以实现对下拉菜单值的获取

if ($_POST["Submit"]<>"")

{

echo $_POST["aa"];

echo "----";

echo $_POST["bb"];

echo "
";

$a=count($_POST["cc"]);

echo "a=$a";

echo "
";

for ($i=0;$i

{

echo $_POST["cc"][$i];

echo "----";

}

}

?>

无标题文档

boy

girl

zj

sh

hz

我正在使用此代码从数据库重新填充下拉列表：

$city_id = 15;

while($row = mysql_fetch_assoc($result)) {

$selected = ($row['city_id'] == $city_id) ? 'selected="selected" ' : NULL;

echo '"'.$row['city_name'].'"\n';

}

它的工作就像一种魅力,但我的问题是,它们是否是更优雅的解决方案？

解决方法:

我总是使用一个函数,因为选择框是我最终要创建的东西…

function select($name, $default, $values, $style='', $param='') {

$html = '';

foreach($values as $i => $data) {

if (isset($data['noFormat'])) {

$html .= '

(isset($data['style']) ? ' style="'.$data['style'].'" ' : '').'>'.$data['text'].'

';

} else {

$html .= '

(isset($data['style']) ? ' style="'.$data['style'].'" ' : '').'>'.htmlentities($data['text']).'

';

}

}

$html .= '';

return $html;

}

然后遍历您的查询以构建如下数组：

$default[] = array('value' => '0', 'text' => 'Select a City...');

while($row = mysql_fetch_assoc($result)) {

$list[] = array('value' => $row['city_id'], 'text' => $row['city_name']);

}

$list = array_merge($default,$list);

最后是创建HTML的示例：

select('select','form_el_name',$list['0'],$list,'font-size:12px;','onChange="document.forms[0].submit();"');

希望能帮助到你！

标签：forms,php,database

来源： https://codeday.me/bug/20191105/1998106.html