recherche

Maison >interface Web >js tutoriel >Méthode JS pour modifier l'attribut d'option dans les compétences select_javascript

Méthode JS pour modifier l'attribut d'option dans les compétences select_javascript

WBOY
WBOYoriginal
2016-05-16 15:36:422006parcourir

L'exemple de cet article décrit la méthode de modification de l'attribut option dans select à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Aidez un ami à résoudre un petit problème. La condition est de modifier la valeur du texte affichée dans l'onglet sélectionné, et la nouvelle valeur est stockée dans une certaine zone de texte

Fenêtre initiale : 

<html>
 <head>
  <title>原窗口</title>
  <script>
   var parentValue=""; //全局变量，用于保存点击详情时select中指定opeion的值
   function detail() {
    var select=document.getElementById('SHGX'); //获得select对象
    parentValue=select.options[select.selectedIndex].text; 
    window.open('详情窗口.html')
   }
   function updateSelect(childValue) {
    var select=document.getElementById('SHGX'); 
    for(var i=0;i<select.length;i++) {
     if(select.options[i].text==parentValue) 
      select.options[i].text=childValue;
    }    
   }
  </script>
 </head>
 <body>
  <select id='SHGX'>
   <option value='111' title='夫'>夫</option>
   <option value='112' title='妻'>妻</option>
   <option value='120' title='子'>子</option>
   <option value='121' title='独生子'>独生子</option>
   <option value='122' title='继子'>继子</option>
   <option value='128' title='女婿'>女婿</option>   
  </select>
  <button onclick="detail(); ">详情</button>
 </body>
</html>

Fenêtre de détails : 

<html>
 <head>
 <title>详情窗口</title>
 <script>
  function modify() {
  var childValue=document.getElementById('text_01').value;
  opener.updateSelect(childValue); //调用父窗口的函数
  }
 </script>
 </head>
 <body>
 <input id="text_01" type="text" value=""/>
 <button onclick="modify();">修改</button>
 </body>
</html>

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS réalise l'effet simple de l'onglet de page Web des compétences de commutation automatique planifiées_javascriptArticle suivant：JS réalise l'effet simple de l'onglet de page Web des compétences de commutation automatique planifiées_javascript

Articles Liés

Voir plus