如何動態加載選擇選項 - Joomla

Question

因爲我對jquery有些不熟悉，所以請原諒我。我有一個表格中的產品列有類別列。

我還有一個名爲list_sizes的可重複字段列，其中包含標題，圖片和說明等選項。

我想要做的是加載特定的產品，一旦選擇一個類別。示例 - 在類別中，選擇一個類別應僅在選擇字段中爲您提供其下的產品，選擇一個產品應在下一個選擇框中僅指定其大小。

，很容易任何想法，將不勝感激。預先感謝您的幫助。

Answer 1

得到了這個使用jQuery改變選擇選項的解決方案......

<script> 
            $(document).ready(function(){ 
             $("select#jform_category_title").change(function() 
             { 
              cid = $(this).val(); 
                console.log(cid); 
              $.ajax({ 
               url: 'index.php?option=com_orders&task=orderform.getAjaxProducts', 
               type: 'GET', 
               dataType: "json", 
               data: {'cid': cid} , 
               success: function(response){ 
                // this is a joomla JSONResponse object 
                // our data is in response.data 
                console.log(response); 

                if (response.success){ 
                 // create our list of options with response.data 
                 $("select#jform_product_title option").remove(); 
                 var options = response.data; 
                 $.each(options, function(i, obj) { 
                  // obj contains text and value 
                  jQuery("select#jform_product_title").append("<option value="+ obj.value +">" + obj.text + "</option>"); 

                 }); 
                 jQuery("select").trigger("liszt:updated"); 
                } 
                else { 
                 alert(response.message); 
                } 
               } 
              }) 
             }) 

              $("select#jform_product_title").change(function() 
              { 
               subcounty_id = $(this).val(); 
               $.ajax({ 
                url: 'index.php?option=com_orders&task=orderform.getAjaxSizes', 
                type: 'GET', 
                dataType: "json", 
                data: {'subcounty_id': subcounty_id} , 
                success: function(response){ 
                 // this is a joomla JSONResponse object 
                 // our data is in response.data 
                 if (response.success){ 
                  // create our list of options with response.data 
                  $("select#jform_book_size option").remove(); 
                  var options = response.data; 
                     console.log(response.data); 
                  $.each(options, function(i, obj) { 
                   // obj contains text and value 
                   jQuery("select#jform_book_size").append("<option value="+ obj.value +">" + obj.text + "</option>"); 

                  }); 
                  jQuery("select").trigger("liszt:updated"); 
                 } 
                 else { 
                  alert(response.message); 
                 } 
                } 
               }) 
              }) 

            }); 

            </script> 

在的Joomla控制器，getAjaxProducts獲得產品列表getAjaxSizes得到大小。

public function getAjaxProducts(){ 
     $ajax   = true; // redundant 
     $category_id = JFactory::getApplication()->input->get('cid'); 
     $data   = OrdersHelpersOrders::getProductsForSelect($category_id); 
     $input   = JFactory::getApplication()->input; 
     // echo json_encode($data); 
     //echo new JResponseJson($data, null, false, $input->get('ignoreMessages', true, 'bool')); 
     echo new JResponseJson($data); 
     jexit(); 
    } 

刪除默認的準備選擇選項response.data

$("select#jform_product_title option").remove(); 

終於觸發使用

jQuery("select").trigger("liszt:updated"); 

HTML的類別選擇結構的變化變

<select name="jform[category_title]" class="inputbox" id="jform_category_title"> 
             <option value=""><?php echo JText::_('Select Category'); ?></option> 
             <?php echo JHtml::_('select.options', $this->subCategories, 'value', 'text', $this->item->cid); ?> 
            </select> 

HTML產品選擇結構變得

<select name="jform[product_title]" class="inputbox" id="jform_product_title"> 
           <option value=""><?php echo JText::_('Select Product'); ?></option> 
           <?php echo JHtml::_('select.options', $this->subProducts, 'value', 'text', $this->item->product_title); ?> 
          </select> 

HTML一樣

<select name="jform[book_size]" class="inputbox" id="jform_book_size"> 
           <option value=""><?php echo JText::_('Select Size'); ?></option> 
           <?php echo JHtml::_('select.options', $this->sizes, 'value', 'text', $this->item->ward_id); ?> 
         </select> 

選擇尺寸