新建一个html文件。如图
在html页面找打body标签,在这个标签里新建select标签,在select标签内创建option标签并设置内容。如图
代码:
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
保存好html文件后使用浏览器打开,即可看到效果。如图:
所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图:
所有代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉选择框</title>
</head>
<body>
<select>
<option>-请选择-</option>
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</body>
</html>
html下拉框怎么用js添加新值javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下:
1、HTML结构,包括一个select项,含有三个options。另外,设置input和button,通过自由父子,实现给select增加自定义option。
此时的显示效果如下,其中option中有三项。
2、JS的函数设计如下:
现有的options如下:
3、在页面上输入新的数据,点击添加。
此时的select效果显示如下,自由添加功能实现。
<SCRIPT LANGUAGE="JavaScript"><!-- Begin
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13:
//Enter
sel.options[sel.length] = new Option("","",false,true)
event.returnValue = false
break
case 27:
//Esc
alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + "")
event.returnValue = false
break
case 46:
//Delete
if(confirm("Delete!?"))
{
sel.options[sel.selectedIndex] = null
if(sel.length>0)
{
sel.options[0].selected = true
}
}
event.returnValue = false
break
case 8:
//Back Space
var s = sel.options[sel.selectedIndex].text
sel.options[sel.selectedIndex].text = s.substr(0,s.length-1)
event.returnValue = false
break
}
}
function catch_press(sel)
{
sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode)
event.returnValue = false
}
//End -->
</script>
</head>
<select size="1" name="fh_cp" onKeyDown="catch_keydown(this)" onKeyPress="catch_press(this)" style="font-size:12px">
<option></option>
<?if ($FH_CP<>""){
$seek_cp="select gg,cp from bom where lh=\'$FH_CP\' "
$result_cp=@pg_exec($link,$seek_cp)
$GG=trim(pg_result($result_cp,0,"gg"))
$CP=trim(pg_result($result_cp,0,"cp"))
$C_G=$CP.\' \'.$GG
echo "<option selected value=\\"$FH_CP\\">$C_G</option>" }?>
<?for($j=0$j<$row_fh$j++){
$gg_fh=trim(pg_result($result_fh,$j,"gg"))
$cp_fh=trim(pg_result($result_fh,$j,"cp"))
$seek_lh="select * from bom where cp=\'$cp_fh\' and gg=\'$gg_fh\' "
$result_lh=pg_exec($link,$seek_lh)
$lh_fh=trim(pg_result($result_lh,0,"lh"))
$cp_gg=$cp_fh.\' \'.$gg_fh
if($lh_fh==$FH_CP){
echo "<option selected value=\\"$lh_fh\\">$cp_gg</option>"
}
else{
echo "<option value=\\"$lh_fh\\">$cp_gg</option>"
}
}
?>
</select>