Joomla使用javascript重置sql字段选择

如何将Joomla sql类型字段重置为其初始值

设置：

我有一个下拉列表，其中有三个“类型”选项“项目编号”“标准形状”和“非标准形状”，它会触发一个javascript函数来显示选定的div，并在joomla表单上隐藏其他div。

开关

功能还将隐藏div中的字段重置为初始状态。“standard shape”div包含另一个下拉列表，其中包含从joomla sql类型字段生成的形状列表，该字段触发更多javascript以显示形状的图像

情景：

如果我将“类型”设置为“标准形状”，并选择一个形状，例如“矩形”，然后将开关更改为“非标准形状”，然后再返回，则“形状”下拉列表将保留其“矩形”的值，即使其值为空。问题是，如果我尝试重新选择“矩形”，则

onchange

事件将显示图像未触发

希望我解释得足够好，但如果不清楚，我可以尝试进一步澄清

代码如下：

defined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers/html');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');
JHtml::_('behavior.keepalive');

// Import CSS
$document = JFactory::getDocument();
$document->addStyleSheet('components/com_escorders/assets/css/escorders.css');
?>
<script type="text/javascript">
    js = jQuery.noConflict();

    js(document).ready(function(){
        setitemtype(true);
        setshapelabels();
    });

    Joomla.submitbutton = function(task)
    {
        if(task == 'product.cancel'){
            Joomla.submitform(task, document.getElementById('product-form'));
        }
        else{

            if (task != 'product.cancel' && document.formvalidator.isValid(document.id('product-form'))) {
                Joomla.submitform(task, document.getElementById('product-form'));
            }
            else {
                alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>');
            }
        }
    }

    function setitemtype(init)
    {
        var selection = jQuery('#jform_type').find(":selected").text();
        var id = jQuery('#jform_itemid').val();

        if (init !== true)
        {
            jQuery('#jform_itemid').val('');
        };

        if (selection === 'Item Number') 
        {
            resetshape();
            jQuery('#shape-img-container').hide();
            jQuery('#jform_itemid').attr('readonly',false);
            jQuery('#jform_shape').closest('.control-group').hide();
            jQuery('#jform_shape').val('');
            jQuery('#jform_dim1').closest('.control-group').hide();
            jQuery('#jform_dim1').val('');
            jQuery('#jform_dim2').closest('.control-group').hide();
            jQuery('#jform_dim2').val('');
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#jform_dim3').val('');
            jQuery('#jform_drawingfile').closest('.control-group').hide();
            jQuery('#jform_drawingurl').closest('.control-group').hide();
            jQuery('#jform_drawingurl').val('');
        } 
        else if (selection === 'Standard Shape')
        {
            var shape = jQuery('#jform_shape').val();
            if (shape) 
            {
                jQuery('#shape-img-container').show();              
            }
            jQuery('#jform_itemid').attr('readonly',true);
            jQuery('#jform_shape').closest('.control-group').show();
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').show();
            jQuery('#jform_drawingfile').closest('.control-group').hide();
            jQuery('#jform_drawingurl').closest('.control-group').hide();
            jQuery('#jform_drawingurl').val('');
            setshapelabels();
        }
        else
        {
            resetshape();
            jQuery('#shape-img-container').hide();
            jQuery('#jform_itemid').attr('readonly',true);
            jQuery('#jform_shape').closest('.control-group').hide();
            jQuery('#jform_shape').val('');
            jQuery('#jform_dim1').closest('.control-group').hide();
            jQuery('#jform_dim1').val('');
            jQuery('#jform_dim2').closest('.control-group').hide();
            jQuery('#jform_dim2').val('');
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#jform_dim3').val('');
            jQuery('#jform_drawingfile').closest('.control-group').show();
            jQuery('#jform_drawingurl').closest('.control-group').show();
        };
    }

    function setshapelabels()
    {
        var selection = jQuery('#jform_shape').find(":selected").text();

        switch(selection)
        {
        case 'Rectangle':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/rectangle.gif')
            jQuery('#jform_dim1-lbl').text('Length')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Length</strong><br />Length Value')
            jQuery('#jform_dim2-lbl').text('Height')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Height</strong><br />Height Value')
            jQuery('#jform_dim3-lbl').text('Dimension 3')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Dimension 3</strong><br />Dimension 3 - Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#shape-img-container').show();
            break;
        case 'Rhomboid':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/rhomboid.gif')
            jQuery('#jform_dim1-lbl').text('Length')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Length</strong><br />Length Value')
            jQuery('#jform_dim2-lbl').text('Height')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Height</strong><br />Height Value')
            jQuery('#jform_dim3-lbl').text('Angle')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Angle</strong><br />Angle Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').show();
            jQuery('#shape-img-container').show();
            break;
        case 'Round':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/round.gif')
            jQuery('#jform_dim1-lbl').text('Diameter')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Diameter</strong><br />Diameter Value')
            jQuery('#jform_dim2-lbl').text('Dimension 2')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Dimension 2</strong><br />Dimension 2 - Value')
            jQuery('#jform_dim3-lbl').text('Dimension 3')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Dimension 3</strong><br />Dimension 3 - Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').hide();
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#shape-img-container').show();
            break;
        case 'Sector':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/sector.gif')
            jQuery('#jform_dim1-lbl').text('Diameter')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Diameter</strong><br />Diameter Value')
            jQuery('#jform_dim2-lbl').text('Angle')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Angle</strong><br />Angle Value')
            jQuery('#jform_dim3-lbl').text('Dimension 3')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Dimension 3</strong><br />Dimension 3 - Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#shape-img-container').show();
            break;
        case 'Trapezium':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/trapezium.gif')
            jQuery('#jform_dim1-lbl').text('Length')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Length</strong><br />Length Value')
            jQuery('#jform_dim2-lbl').text('Height')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Height</strong><br />Height Value')
            jQuery('#jform_dim3-lbl').text('Angle')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Angle</strong><br />Angle Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').show();
            jQuery('#shape-img-container').show();
            break;
        case 'Triangle':
            jQuery('#shape-img-container').show();
            jQuery('#shape-img').attr('src', '../images/escorders/shapes/triangle.gif')
            jQuery('#jform_dim1-lbl').text('Length')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Length</strong><br />Length Value')
            jQuery('#jform_dim2-lbl').text('Angle')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Angle</strong><br />Angle Value')
            jQuery('#jform_dim3-lbl').text('Dimension 3')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Dimension 3</strong><br />Dimension 3 - Value')
            jQuery('#jform_dim1').closest('.control-group').show();
            jQuery('#jform_dim2').closest('.control-group').show();
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#shape-img-container').show();
            break;
        default:
            jQuery('#shape-img').attr('src', '')
            jQuery('#jform_dim1-lbl').text('Dimension 1')
            jQuery('#jform_dim1-lbl').attr('data-original-title', '<strong>Dimension 1</strong><br />Dimension 1 - Value')
            jQuery('#jform_dim2-lbl').text('Dimension 2')
            jQuery('#jform_dim2-lbl').attr('data-original-title', '<strong>Dimension 2</strong><br />Dimension 2 - Value')
            jQuery('#jform_dim3-lbl').text('Dimension 3')
            jQuery('#jform_dim3-lbl').attr('data-original-title', '<strong>Dimension 3</strong><br />Dimension 3 - Value')
            jQuery('#jform_dim1').closest('.control-group').hide();
            jQuery('#jform_dim2').closest('.control-group').hide();
            jQuery('#jform_dim3').closest('.control-group').hide();
            jQuery('#shape-img-container').hide();
        };
        buildshapestring();
    }

    function changedecimalplaces(el)
    {
        var num = parseFloat(el.value).toFixed(3);
        el.value = num 
        buildshapestring();
    }

    function buildshapestring() 
    {
        var selection = jQuery('#jform_type').find(":selected").text();

        if (selection === 'Standard Shape')
        {
            var shape = jQuery('#jform_shape').val();
            var shapestring = '';
            var dim1 = jQuery('#jform_dim1').val();
            var dim2 = jQuery('#jform_dim2').val();
            var dim3 = jQuery('#jform_dim3').val();

            switch(shape)
            {
            case 'Rectangle':
                shapestring  = 'Rect [L:'+dim1+'] [H:'+dim2+']';
                break;
            case 'Rhomboid':
                shapestring  = 'Rhom [L:'+dim1+'] [H:'+dim2+'] [A:'+dim3+']';
                break;
            case 'Round':
                shapestring  = 'Roun [D:'+dim1+']';
                break;
            case 'Sector':
                shapestring  = 'Sect [D:'+dim1+'] [A:'+dim2+']';
                break;
            case 'Trapezium':
                shapestring  = 'Rhom [L:'+dim1+'] [H:'+dim2+'] [A:'+dim3+']';
                break;
            case 'Triangle':
                shapestring  = 'Tria [L:'+dim1+'] [A:'+dim2+']';
                break;
            default:
                shapestring  = '';
            };

            jQuery('#jform_itemid').val(shapestring);
        }
    }

    function resetshape()
    {
        jQuery('jform_shape').val('');
    }

    function clearselectedfile () 
    {
        event.preventDefault();
        var control = js("#jform_drawingfile");
        control.replaceWith( control = control.clone( true ) );
        jQuery('#jform_itemid').val('');
        jQuery('#jform_drawingurl').val('');
    }

    function fillfilename ()
    {
        var filename = jQuery('#jform_drawingfile').val().replace(/^.*[\\\/]/, '');
        jQuery('#jform_itemid').val(filename);
        jQuery('#jform_drawingurl').val('#');
    }

</script>

<form action="<?php echo JRoute::_('index.php?option=com_escorders&layout=edit&id=' . (int) $this->item->id); ?>" method="post" enctype="multipart/form-data" name="adminForm" id="product-form" class="form-validate">
    <div class="row-fluid">
        <div class="span10 form-horizontal">
            <fieldset class="adminform">

            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('id'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('id'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('type'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('type'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('itemid'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('itemid'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('shape'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('shape'); ?></div>
                <div id="shape-img-container">
                    <img id="shape-img" src="">
                </div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('dim1'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('dim1'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('dim2'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('dim2'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('dim3'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('dim3'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('drawingfile'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('drawingfile'); ?><button id="clearfile" onclick="clearselectedfile()">Clear</button></div>  
            </div>          
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('drawingurl'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('drawingurl'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('state'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('state'); ?></div>
            </div>
            <div class="control-group">
                <div class="control-label"><?php echo $this->form->getLabel('created_by'); ?></div>
                <div class="controls"><?php echo $this->form->getInput('created_by'); ?></div>
            </div>


            </fieldset>
        </div>      

        <input type="hidden" name="task" value="" />
        <?php echo JHtml::_('form.token'); ?>

    </div>
</form>

定义（“JEXEC”）或模具；
JHtml:：addIncludePath（JPATH_组件'./helpers/html'）；
JHtml:：(（'behavior.tooltip'）；
JHtml:：(（'behavior.formvalidation'）；
JHtml:：(（'formbehavior.selected'，'select'）；
JHtml:：(（'behavior.keepalive'）；
//导入CSS
$document=JFactory:：getDocument（）；
$document->addStyleSheet（'components/com_escorders/assets/css/escorders.css'）；
?>
js=jQuery.noConflict（）；
js（document）.ready（function（）{
setitemtype（true）；
setshapelabels（）；
});
Joomla.submitbutton=函数（任务）
{
如果（任务=='product.cancel'）{
submitform（任务、文档、getElementById（'product-form'）；
}
否则{
if（task！=“product.cancel”&&document.formvalidator.isValid（document.id（'product-form'））{
submitform（任务、文档、getElementById（'product-form'）；
}
否则{
警报（“”）；
}
}
}
函数setitemtype（init）
{
var selection=jQuery（'\jform\u type'）。查找（：selected“）.text（）；
var id=jQuery（'#jform_itemid'）.val（）；
if（init！==true）
{
jQuery（'#jform_itemid'）.val（''）；
};
如果（选择==='项目编号'）
{
重置形状（）；
jQuery（“#shape img container”）.hide（）；
jQuery（'#jform_itemid'）.attr（'readonly'，false）；
jQuery（'#jform_shape'）。最近（'.control group'）。hide（）；
jQuery（'#jform_shape'）.val（''）；
jQuery（'#jform_dim1'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim1'）.val（''）；
jQuery（'#jform_dim2'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim2'）.val（''）；
jQuery（'#jform_dim3'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim3'）.val（''）；
jQuery（'#jform_drawingfile'）.closest（'.control group'）.hide（）；
jQuery（'#jform_drawingurl'）.closest（'.control group'）.hide（）；
jQuery（'#jform_drawingurl'）.val（''）；
} 
else if（选择===“标准形状”）
{
var shape=jQuery（'#jform_shape'）.val（）；
如果（形状）
{
jQuery（“#shape img container”）.show（）；
}
jQuery（'#jform_itemid'）.attr（'readonly'，true）；
jQuery（'#jform_shape'）。最近（'.control group'）。show（）；
jQuery（'#jform_dim1'）。最近（'.control group'）。show（）；
jQuery（'#jform_dim2'）。最近（'.control group'）。show（）；
jQuery（'#jform_dim3'）。最近（'.control group'）。show（）；
jQuery（'#jform_drawingfile'）.closest（'.control group'）.hide（）；
jQuery（'#jform_drawingurl'）.closest（'.control group'）.hide（）；
jQuery（'#jform_drawingurl'）.val（''）；
setshapelabels（）；
}
其他的
{
重置形状（）；
jQuery（“#shape img container”）.hide（）；
jQuery（'#jform_itemid'）.attr（'readonly'，true）；
jQuery（'#jform_shape'）。最近（'.control group'）。hide（）；
jQuery（'#jform_shape'）.val（''）；
jQuery（'#jform_dim1'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim1'）.val（''）；
jQuery（'#jform_dim2'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim2'）.val（''）；
jQuery（'#jform_dim3'）。最近（'.control group'）。hide（）；
jQuery（'#jform_dim3'）.val（''）；
jQuery（'#jform_drawingfile'）.closest（'.control group'）.show（）；
jQuery（'#jform_drawingurl'）.closest（'.control group'）.show（）；
};
}
函数setshapelabels（）
{
var selection=jQuery（“#jform_shape”）.find（“：selected”）.text（）；
开关（选择）
{
案例“矩形”：
jQuery（“#shape img container”）.show（）；
jQuery（'#shape img'）.attr（'src'，'../images/escorders/shapes/rectangle.gif'））
jQuery（'#jform_dim1-lbl'）。文本（'Length'））
jQuery（'#jform_dim1-lbl'）.attr（'data-original-title'，'长度
长度值'）
jQuery（'#jform_dim2-lbl'）。文本（'Height'））
jQuery（“#jform_dim2-lbl”）.attr（'data-original-title'，“高度
高度值”）
jQuery（'#jform_dim3-lbl'）。文本（'维度3'）
jQuery（“#jform_dim3-lbl”）.attr（'data-original-title'，“维度3
维度3-值'）
jQuery（'#jform_dim1'）。最近（'.control group'）。show（）；
jQuery（'#jform_dim2'）。最近（'.control group'）。show（）；
jQuery（'#jform_dim3'）。最近（'.control group'）。hide（）；
jQuery（“#shape img container”）.show（）；
打破
“菱形”病例：
jQuery（“#shape img container”）.show（）；
jQuery（'#shape img'）.attr（'src'，'../images/escorders/shapes/rhomboid.gif'））
js(document).ready(function(){
    setitemtype(true);
    setshapelabels();

    js('#jform_type').change(function(){
        setitemtype(true);
        setshapelabels();
    });

    js('#jform_itemid').change(function(){
        setitemtype(true);
        setshapelabels();
    });
});