87,993
社区成员
发帖
与我相关
我的任务
分享js:select
html code:
地图X：<select onclick="showXY(this);"><option value = "-62">-62</option> </select>
js code:
function showXY(par){
par.innerHTML="<option value = '-62' selected>-62</option>";
for(var i = -61;i<=62;i++){
var text = i;
var child =document.createElement("option");
child.innerHTML = "<option value='"+text+"'>"+text+"<option/>";
par.appendChild(child);
}
}
问题是这样的：我想在点击select后加入<option>按钮，但是加入之后选择其中的一个值，select显示的总是-62，我想为<option>添加click事件，但是不行，有什么解决方法？谢谢
地图X：<select onclick="showXY(this);"><option value = "-62">-62</option> </select>
js code:
function showXY(par){
par.innerHTML="<option value = '-62' selected>-62</option>";
for(var i = -61;i<=62;i++){
var text = i;
var child =document.createElement("option");
child.innerHTML = "<option value='"+text+"'>"+text+"<option/>";
par.appendChild(child);
}
}
问题是这样的：我想在点击select后加入<option>按钮，但是加入之后选择其中的一个值，select显示的总是-62，我想为<option>添加click事件，但是不行，有什么解决方法？谢谢
...全文
请发表友善的回复…
发表回复
千游 2009-12-07
- 打赏
- 举报
按照2楼的方法，问题已经解决了，但是改为onchange不行，而且之前我写的方法也是可以添加option的，只是在选的时候无效，不知道为什么
思無芷盡 2009-12-07
- 打赏
- 举报
基本对 select 的所有操作：
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0; 思無芷盡 2009-12-07
- 打赏
- 举报
给select 加onclick也可以 就是无条件触发
onchange 是你select 选择改变时触发而已
onchange 是你select 选择改变时触发而已
cntmi 2009-12-07
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script language="JavaScript">
<!--
//比如你想在点击select之后，选择50的option
var sel_value = 50 ;
function showXY(par,sel_value){
if(par.options.length > 1) return ;
for(var i = -61;i <=62;i++){
var tmp = new Option(i,i);
par.options.add(tmp);
if(i == sel_value) {
tmp.selected = true ;
}
}
}
//-->
</script>
地图X： <select onclick="showXY(this);"> <option value = "-62">-62 </option> </select>
</body>
</html>cntmi 2009-12-07
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script language="JavaScript">
<!--
//比如你想在点击select之后，选择50的option
var sel_value = 50 ;
function showXY(par){
if(par.options.length > 1) return ;
for(var i = -61;i <=62;i++){
var tmp = new Option(i,i);
par.options.add(tmp);
if(i == sel_value) {
tmp.selected = true ;
}
}
}
//-->
</script>
地图X： <select onclick="showXY(this);"> <option value = "-62">-62 </option> </select>
</body>
</html>
思無芷盡 2009-12-07
- 打赏
- 举报
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在"); //没有可以删掉
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入"); //没有可以删掉
}
}
//修改你的showXY()代码
function showXY(par){
for(var i = -61;i <=62;i++){
jsAddItemToSelect(par,i,i);
}
}
jol_boy 2009-12-07
- 打赏
- 举报
select 是onchange事件。
