hide and show div on select onchange

[Habib Zare, modifié il y a 10 années.]

how can hide and show the hidden div on selecting any option of select tag?

this is my code that not work.

<aui:select name="myselect"> 
<aui:option value="val1" label="label1"> 
<aui:option value="val2" label="label2"> 
<aui:option value="val3" label="label3"> 
</aui:option></aui:option></aui:option></aui:select>

<div id="myDiv" hidden="true">
		<aui:input name="skin" type="checkbox" value="white" />
	</div>

<aui:script>
var A = AUI();

var myselect= A.one("#<portlet:namespace />myselect");
myselect.on("change",function(event){
	A.all("#<portlet:namespace />myselect option:selected").each(function(node){
		var selected = node.val();
		
		if(selected=="val2"){
			A.one('#myDiv').show();
		}
	});
});
</aui:script>

[Muradali Hasan, modifié il y a 10 années.]

Hi Habib Zare,

If you will check in configuration of asset publisher portlet and change display style Abstract to full content and full content to abstract Liferay is doing same thing which you require.

Look in to this file code is available /portal-trunk/portal-web/docroot/html/portlet/asset_publisher/display_settings.jspf

you can do similar thing.


Thanks-
Muradali

[Habib Zare, modifié il y a 10 années.]

Thanks Muradali Hasan.

I want to use <aui:script > .

[Muradali Hasan, modifié il y a 10 années.]

Habib Zare:

Thanks Muradali Hasan.

I want to use <aui:script > .

Hi Habib

If you look in to code liferay also using aui Script

<aui:script use="aui-base">
	var selectDisplayStyle = A.one('#<portlet:namespace />displayStyle');

	function showHiddenFields () {
		var assetLinkBehavior = A.one('.asset-link-behavior');
		var hiddenFields = A.all('.hidden-field');
		var selectDisplayStyle = A.one('#<portlet:namespace />displayStyle');

		if (hiddenFields) {
			hiddenFields.hide();
		}

		if (selectDisplayStyle) {
			var displayStyle = selectDisplayStyle.val();

			if (displayStyle == 'full-content') {
				var showAssetTitle = A.one('.show-asset-title');
				var showContextLink = A.one('.show-context-link');

				if (showAssetTitle) {
					showAssetTitle.show();
				}

				if (showContextLink) {
					showContextLink.show();
				}
			}
			else {
				if (displayStyle == 'abstracts') {
					var abstractLength = A.one('.abstract-length');

					if (abstractLength) {
						abstractLength.show();
					}
				}

				if (assetLinkBehavior) {
					assetLinkBehavior.show();
				}
			}
		}
	}

	showHiddenFields();

	if (selectDisplayStyle) {
		selectDisplayStyle.on('change', showHiddenFields);
	}

	Liferay.Util.toggleBoxes('<portlet:namespace />enableSocialBookmarksCheckbox','<portlet:namespace />socialBookmarksOptions');
</aui:script>

Thanks-
Murad

[Habib Zare, modifié il y a 10 années.]

how can hide and show the hidden div on selecting any option of select tag?

this is my code that not work.

<aui:select name="myselect"> 
<aui:option value="val1" label="label1"> 
<aui:option value="val2" label="label2"> 
<aui:option value="val3" label="label3"> 
</aui:option></aui:option></aui:option></aui:select>

<div id="myDiv" hidden="true">
		<aui:input name="skin" type="checkbox" value="white" />
	</div>

<aui:script>
var A = AUI();

var myselect= A.one("#<portlet:namespace />myselect");
myselect.on("change",function(event){
	A.all("#<portlet:namespace />myselect option:selected").each(function(node){
		var selected = node.val();
		
		if(selected=="val2"){
			A.one('#myDiv').show();
		}
	});
});
</aui:script>

[Jonathan Mak, modifié il y a 10 années.]

Hi Habib,

Your code is working correctly, you have given your div the html5 hidden attribute which is why you need to remove the hidden attribute instead of using the show()/hide() methods.

HTML5 hidden attribute:

<div id="myDiv" hidden="true">
	<aui:input name="skin" type="checkbox" value="white" />
</div>

Working Code:

<aui:select name="myselect">
	<aui:option value="val1" label="label1"></aui:option>
	<aui:option value="val2" label="label2"></aui:option>
	<aui:option value="val3" label="label3"></aui:option>
</aui:select>

<div id="myDiv" hidden="true">
	<aui:input name="skin" type="checkbox" value="white" />
</div>

<aui:script use="aui-base">
	var myselect= A.one("#<portlet:namespace />myselect");

	myselect.on(
		"change",
		function(event) {
			myselect.all("option:selected").each(
			function(node) {
					var selected = node.val();

					var myDiv = A.one('#myDiv');

					if (selected == "val2") {
						myDiv.attr('hidden', false);
					}
					else {
						myDiv.attr('hidden', true);
					}
				}
			);
		}
	);
</aui:script>

[Habib Zare, modifié il y a 10 années.]

Thanks Jonathan Mak.

I solved my problem.

<style>
  .div_hidden { 
  		visibility:hidden;
  	}
  .div_visible {
  		visibility:visible;
	}

 </style>

<div id="myDiv" class="div_hidden ">
        <aui:input name="skin" type="checkbox" value="white" />
  </div>

<aui:script>
var A = AUI();

var myselect= A.one("#<portlet:namespace />myselect");
myselect.on("change",function(event){
    A.all("#<portlet:namespace />myselect option:selected").each(function(node){
        var selected = node.val();
        
     if(selected=="val2"){
			A.one('#mydiv').replaceClass('div_hidden', 'div_visible');
			// A.one('#mydiv').show();
		}else{
			A.one('#mydiv').replaceClass('div_visible', 'div_hidden')
			// A.one('#mydiv').hide();
		}
    });
});
</aui:script>

[Jonathan Mak, modifié il y a 10 années.]

Hi Habib,

You should just use the "aui-helper-hidden" class if you are trying to show/hide divs.

<aui:select name="myselect">
 <aui:option value="val1" label="label1"></aui:option>
 <aui:option value="val2" label="label2"></aui:option>
 <aui:option value="val3" label="label3"></aui:option>
 </aui:select>

<div id="myDiv" class="aui-helper-hidden">
	<aui:input name="skin" type="checkbox" value="white" />
</div>

<aui:script use="aui-base">
    var myselect= A.one("#<portlet:namespace />myselect");

    myselect.on(
        "change",
        function(event) {
            myselect.all("option:selected").each(
            function(node) {
                    var selected = node.val();

                    var myDiv = A.one('#myDiv');

                    if (selected == "val2") {
                        myDiv.show();
                    }
                    else {
                        myDiv.hide();
                    }
                }
            );
        }
    );
</aui:script>

[Habib Zare, modifié il y a 10 années.]

Thanks Jonathan Mak.