javascript获取元素ID [英] javascript get element id

问题描述

大家好



我有2个html页面....

第一个有iframe加载第二页和一个列表< select>



和另一页有输入按钮



我想添加一个项目到主页面中的列表



这是代码：

  function  addNewListItem（）{
  var  htmlSelect =  document  .getElementById（'  selectYear'）; 
  var  optionValue =  document  .getElementById（'   txtYearValue'）; 
  var  optionDisplaytext =  document  .getElementById（'   txtYearDisplayValue'）; 
 
  if （optionValue.value == ' ' || isNaN（optionValue.value））{
 alert（' 请输入选项值'）; 
 optionValue.focus（）; 
  return   false ; 
} 
 
  if （optionDisplaytext.value == ' < span class =code-string>' || isNaN（optionDisplaytext.value））{
 alert（' 请输入选项显示文字'）; 
 optionDisplaytext.focus（）; 
  return   false ; 
} 
 
  if （isOptionAlreadyExist（htmlSelect，optionValue.value））{
 alert（' 选项值已存在'）; 
 optionValue.focus（）; 
  return   false ; 
} 
 
  if （isOptionAlreadyExist（htmlSelect，optionDisplaytext.value））{
 alert（' 显示文本已存在'）; 
 optionDisplaytext.focus（）; 
  return   false ; 
} 
 
  var  selectBoxOption =  document  .createElement（  option）; 
 selectBoxOption.value = optionValue.value; 
 selectBoxOption.text = optionDisplaytext.value; 
 htmlSelect.add（selectBoxOption， null ）; 
 alert（ 已成功添加选项）; 
  return   true ; 
 
} 
 
 
  function  isOptionAlreadyExist（listBox，value）{
  var  exists =  false ; 
  for （ var  x =  0 ; x< listBox.options.length; x ++）{
  if （listBox.options [x] .value == value || listBox.options [x] .text == value）{
 exists =  true ; 
  break ; 
} 
} 
 返回存在; 
} 

 <  表    border   =  0    align   =  left > ;  
 <   tr   >  
 <   td     align   =  right > 年<   / td  >  
 <   td     align   =  left >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  right > 选项值<   / td  >  
 <   td     align   =  left >  < ;  输入   名称 < span class =code-keyword> =  txtYearValue   类型  =  text    id   =  txtYearValue    /  >  <   / td  >  
 <   / tr  >  
 <   tr  >  
 <   td     align   =  right > 选项显示文字<   / td  >  
 <   td     align   =  left >  <  输入   名称  =  txtYearDisplayValue    type   =  text    id   =  txtYearDisplayValue    /  >  < ;   / td  >  
 <   / tr  >  
 <   tr  >  
 < span class =code-keyword><   td     align   =  right >  <   / td  > ;  
 <   td     align   =  left >  <  输入    name   =  btnAddItem    type   = 按钮    id   =  btnAddItem    value   = 添加选项    onclick   =  javaScript：addNewListItem（）;    /   >  <   / td  >  
 <   / tr  >  
 <   / table  >  

主页有< iframe>加载第二页

和母版页中的代码是：

 <  选择   < span class =code-attribute> name   =  selectYear    id   =  selectYear >  
 <  选项    value   =  2000 >  2000 <   / option  >  
 <  选项    value   =  2001 >  2001 <   / option  >  
 <  选项    value   =  2002 >  2002 <   / option  >  
 <  选项    value   =  2003 >  2003 <   / option  >  
 <  选项    value   =  2004 >  2004  <   / option  >  
 <   / select  >  

解决方案

如果你不打破同源策略，你可以使用： window.parent.document.getElementById（）



样品

h1.html

 <  选择   名称  =  selectYear    id   =  selectYear >  
 <  选项    value   =  2000 >  2000 <   / option  >  
 <  选项    value   =  2001 >  2001 <   / option  >  
 <  选项    value   =  2002 >  2002 <   / option  >  
 <  选项    value   =  2003 >  2003 <   / option  >  
 <  选项    value   =   2004 >  2004 <   / option  >  
  <   / select  >  
 <   iframe     src   =  h2.html >  

h2.html

< pre lang =HTML> < script type = text / javascript >
function addYear（year）{
var select = window .parent. document .getElementById（ selectYear ）;
select.options [select.options.length] = new 选项（年，年）;
}
< / 脚本 >
< 按钮 onclick =' addYear（2005）;' > 添加年份2005 < / button >

Hi everyone

I have 2 html pages ....
the first one has iframe loading the second page and a list "<select>"

and the other page has the input button

I want to add an item to the list that is in master page

and this is the code:

function addNewListItem(){
var htmlSelect=document.getElementById('selectYear');
var optionValue=document.getElementById('txtYearValue');
var optionDisplaytext=document.getElementById('txtYearDisplayValue');

if(optionValue.value==''||isNaN(optionValue.value)){
alert('please enter option value');
optionValue.focus();
return false;
}

if(optionDisplaytext.value==''||isNaN(optionDisplaytext.value)){
alert('please enter option display text');
optionDisplaytext.focus();
return false;
}

if(isOptionAlreadyExist(htmlSelect,optionValue.value)){
alert('Option value already exists');
optionValue.focus();
return false;
}

if(isOptionAlreadyExist(htmlSelect,optionDisplaytext.value)){
alert('Display text already exists');
optionDisplaytext.focus();
return false;
}

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}


       function isOptionAlreadyExist(listBox,value){
                var exists=false;
                for(var x=0;x<listBox.options.length;x++){
                if(listBox.options[x].value==value || listBox.options[x].text==value){
                exists=true;
                break;
                }
                }
                return exists;
        }

<table border="0" align="left">
<tr>
<td align="right">Year</td>
<td align="left"></td>
</tr>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="txtYearValue" type="text" id="txtYearValue" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="txtYearDisplayValue" type="text" id="txtYearDisplayValue" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

the master page has "<iframe>" the load the second page
and the code in the master page is:

<select name="selectYear" id="selectYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>

解决方案

If you don''t break the same-origin policy, you can use: window.parent.document.getElementById()

Sample
h1.html

<select name="selectYear" id="selectYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
<iframe src="h2.html">

h2.html

<script type="text/javascript">
function addYear(year){
	var select = window.parent.document.getElementById("selectYear");
	select.options[select.options.length] = new Option(year, year);
}
</script>
<button onclick='addYear(2005);'>Add year 2005</button>

这篇关于javascript获取元素ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！