title: easyui-dialog : is it possible to change the labels/textbox visibility using a dropbox list and javascript
body: <p>I'm using easyui-dialog to open a window with textbox and label when I press on a button on my page. The code is working and looks like :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     &lt;script type="text/javascript"&gt;
  
        var url;
  
        function newEvent(){
  
         $('#dlg').dialog('open').dialog('setTitle','Nouvel Événement');
  
         $('#fm').form('clear');
  
         url = 'save_event.php';
  
        }
  
        function editEvent(){
  
         var row = $('#dg').datagrid('getSelected');
  
         if (row){
  
          $('#dlg').dialog('open').dialog('setTitle','Modifier l\'événement');
  
          $('#fm').form('load',row);
  
          url = 'edit_event.php?id='+row.id;
  
         }
  
        }
  
        function saveEvent(){
  
  
         $('#fm').form('submit',{
  
          url: url,
  
          onSubmit: function(){
  
           return $(this).form('validate');
  
          },
  
          success: function(result){
  
           var result = eval('('+result+')');
  
           if (result.errorMsg){
  
            $.messager.show({
  
             title: 'Error',
  
             msg: result.errorMsg
  
            });
  
           } else {
  
            $('#dlg').dialog('close');  // close the dialog
  
            $('#dg').datagrid('reload'); // reload the user data
  
           }
  
          }
  
         });
  
        }
  
        function deleteEvent(){
  
         var row = $('#dg').datagrid('getSelected');
  
         if (row){
  
          $.messager.confirm('Confirmation','Êtes-vous certain de vouloir supprimer cet événement?',function(r){
  
           if (r){
  
            $.post('delete_event.php',{id:row.id},function(result){
  
             if (result.success){
  
              $('#dg').datagrid('reload'); // reload the user data
  
             } else {
  
              $.messager.show({ // show error message
  
               title: 'Erreur',
  
               msg: result.errorMsg
  
              });
  
             }
  
            },'json');
  
           }
  
          });
  
         }
  
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
  
         closed="true" buttons="#dlg-buttons" resizable="true"&gt;
  
        &lt;div class="ftitle"&gt;Gestion des événements&lt;/div&gt;
  
        &lt;form id="fm" method="post" novalidate&gt;
  
         &lt;div class="fitem"&gt;
  
          &lt;label&gt;Événement&lt;/label&gt;
  
          &lt;input id="evenement" name="evenement" class="easyui-textbox"&gt;
  
         &lt;/div&gt;
  
         &lt;div class="fitem"&gt;
  
          &lt;label&gt;Objet:&lt;/label&gt;
  
          &lt;input name="objet" class="easyui-textbox"&gt;
  
         &lt;/div&gt;
  
         &lt;div class="fitem"&gt;
  
          &lt;label&gt;Filtre:&lt;/label&gt;
  
          &lt;input name="filtre" class="easyui-textbox"  &gt;
  
         &lt;/div&gt;
  
         &lt;div class="fitem"&gt;
  
          &lt;label&gt;rotation&lt;/label&gt;
  
          &lt;input name="rotation" class="easyui-textbox" type="text" value=""&gt;
  
         &lt;/div&gt;
  
  
            
  
  
        &lt;/form&gt;
  
  
  
  
  
       &lt;/div&gt;
  
       &lt;div id="dlg-buttons"&gt;
  
        &lt;a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveEvent()" style="width:90px"&gt;Enregistrer&lt;/a&gt;
  
        &lt;a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px"&gt;Annuler&lt;/a&gt;
  
       &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is working well. Now, I have a dropbox list menu in my page, and I'm using a onchange="javaFunction()" to do some stuff. Now, what I wish to do is to change the visibility of the textbox/labels of the easyui-dialog with the function called by my dropbox list.</p>
  
  <p>For exemple, let's say that I have 6 labels and 6 textbox. If the selected option is 1, I want to show label/textbox 1-2 only and hide 3-4-5-6. If the option is 2, I want to show label/textbox 3-4 and hide the others.</p>
  
  <p>I want trying something like :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function(){
  var txtbox1=document.getElementById('txtbox1');
      txtbox1.style.display='none';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>but it's not working... I'm not sure how to make that</p>