Multiple Dynamic drop down list

[Ranen Das, modificado 11 Anos atrás.]

Here is a code snippet for Multiple dynamic drop down list- main funda is to use, Liferay Json object and Json array with ResourceRequest/ResourceResponse.

In these code - once user select a country, user will get dyunamic data in state, channel(orgz) and another one drop down called Distributor list, its plain simple java code with Jquery. Thanks

Step 1 :-

	<select name="state" id="selectStates">
	&lt;%
	List stateList = (List)request.getAttribute("stateList");
		if(stateList!=null){
			for(Region stateTemp:stateList){
	%&gt;
	
			
				<option id="stateName" value="<%= String.valueOf(savedState.getRegionId())%>" selected>&lt;%=savedState.getName()%&gt;</option>	
			
		   
			
				<option id="stateName" value="<%= String.valueOf(stateTemp.getRegionId())%>">&lt;%=stateTemp.getName()%&gt;</option>	
			
					
	&lt;%}} %&gt;
	</select>




<select id="selectCountry" name="country">
<option value=""></option> 
	&lt;%	
		List activeCountryList = (List)request.getAttribute("activeCountryList");
		long selectedCountryId = 0;
		if(addressToDisplay != null)
			selectedCountryId = addressToDisplay.getCountry().getCountryId();
		if(activeCountryList!=null){
			  for(Country activeCountry : activeCountryList){	
					 
	%&gt;
	
		
			<option id="countryName" value="<%= String.valueOf(activeCountry.getCountryId())%>" selected>&lt;%=activeCountry.getName()%&gt;</option>	
		
		
			<option id="countryName" value="<%= String.valueOf(activeCountry.getCountryId())%>">&lt;%=activeCountry.getName()%&gt;</option>	
		
					
&lt;%	}
}%&gt;

</select>


	<select name="selectChannel" id="selectChannels">
	&lt;%	
		List  channelList = (List)request.getAttribute("channelList");
		if(channelList != null){
		String companyChannel = (String)request.getAttribute("channel");
		for(Organization selectChannel : channelList){				   				
	%&gt;
			
				
					<option id="selectChannel" value="<%= String.valueOf(selectChannel.getOrganizationId()) %>" selected>&lt;%= OnePRMOrganizationServiceUtil.getProgramDisplayName(selectChannel) %&gt;</option>	
				
				
					<option id="selectChannel" value="<%= String.valueOf(selectChannel.getOrganizationId()) %>">&lt;%= OnePRMOrganizationServiceUtil.getProgramDisplayName(selectChannel) %&gt;</option>	
				
							
		&lt;%	}}%&gt;
	</select>




	<select label="" name="distributors" id="selectDistributors" multiple length="5">
	 &lt;%
	 List distributorList = (List)request.getAttribute("distributorList");
	 List existingDistributorList = (List)request.getAttribute("existingDistributorList");
		if(distributorList!=null){
			for(Distributor distributor : distributorList){  
			String distributorId = String.valueOf(distributor.getDistributorId());
	%&gt;
	
		 
			<option value="<%=distributorId%>" selected="true">&lt;%= distributor.getName()%&gt; </option>         
		 
		 
			<option value="<%=distributorId%>">&lt;%= distributor.getName()%&gt; </option>         
		 
	 
	&lt;%}}%&gt;
	</select>


Step 2:-

jQuery("#selectCountry").change(function() {	
jQuery('#selectStates').empty();
jQuery('#selectChannels').empty();
jQuery('#selectDistributors').empty();				
var country = jQuery("#selectCountry").val();
	var url = '<portlet:resourceurl id="getChannelAndStateList"></portlet:resourceurl>';
	jQuery.post(url,{countryName : country},function(data) {
		for(i=0;i<data.jsonstateslist.length;i++){ jsonstateslist="data.jsonStatesList[i].split(&quot;:&quot;);" jquery("#selectstates").append("<option value="&quot;+ jsonStatesList[0] +&quot;">"+jsonStatesList[1]+"");
		}
		
	   for(i=0;i<data.jsonchannelslist.length;i++){ jsonchannelslist="data.jsonChannelsList[i].split(&quot;:&quot;);" jquery("#selectchannels").append("<option value="">"+""+"<option value="&quot;+ jsonChannelsList[0] +&quot;">"+jsonChannelsList[1]+"</option>");
	   }
		for(i=0;i<data.jsondistributorslist.length;i++){ jsondistributorslist="data.jsonDistributorsList[i].split(&quot;:&quot;);" jquery("#selectdistributors").append("<option value="&quot;+ jsonDistributorsList[0] +&quot;">"+jsonDistributorsList[1]+"");
	   }												
	});						
});

Step 3:-

@Override
	public void serveResource(ResourceRequest request, ResourceResponse response)
			throws PortletException, IOException {
		ThemeDisplay themeDisplay = (ThemeDisplay) request.getAttribute(WebKeys.THEME_DISPLAY);		
		String jsp = null;
		response.setContentType("text/html");
		String resourceId = request.getResourceID();

		if(Validator.isNotNull(resourceId) &amp;&amp; resourceId.length() != 0 &amp;&amp; resourceId.equalsIgnoreCase("getChannelAndStateList")) {
			String countryId = request.getParameter("countryName");
			List<region> stateList = null;
			List<organization> channelList = null;	
			List<distributor> distributorList = null;
			JSONObject jsonFeed = JSONFactoryUtil.createJSONObject();		
			
			if(countryId!=null &amp;&amp; countryId.isEmpty() !=true){
				stateList = getRegions(countryId);
				distributorList = getDistributorByCountryAndActive(Long.valueOf(countryId));
				try {
					channelList = getChannelsForCountry(themeDisplay, countryId);
				} catch (Exception e) {
					e.printStackTrace();
					log.error("There is some error in getChannelsForCountry  = "+ e);
				} 
			}	
			JSONArray jsonStatesList = JSONFactoryUtil.getJSONFactory().createJSONArray();
			JSONArray jsonDistributorsList = JSONFactoryUtil.getJSONFactory().createJSONArray();
			JSONArray jsonChannelsList = JSONFactoryUtil.getJSONFactory().createJSONArray();			
			if(stateList!=null){
				for(Region region:stateList){
					if(jsonStatesList!=null)
						jsonStatesList.put(region.getRegionId()+ ":"+ region.getName());
				}
			}			
			if(distributorList!=null){
				for(Distributor distributor:distributorList){
					if(jsonDistributorsList!=null)
						jsonDistributorsList.put(distributor.getDistributorId()+ ":"+ distributor.getName());
				}
			}			
			if(channelList!=null){
				for(Organization channel:channelList){
					if(jsonChannelsList!=null)
						//jsonChannelsList.put(channel.getOrganizationId()+ ":"+ channel.getName());
						jsonChannelsList.put(channel.getOrganizationId()+ ":"+ OnePRMOrganizationServiceUtil.getProgramDisplayName
											(channel));
				}
			}
			jsonFeed.put("jsonStatesList", jsonStatesList);
			jsonFeed.put("jsonDistributorsList", jsonDistributorsList);
			jsonFeed.put("jsonChannelsList", jsonChannelsList);
			response.setContentType("application/json");
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write(jsonFeed.toString());
		}

</distributor></organization></region></data.jsondistributorslist.length;i++){></data.jsonchannelslist.length;i++){></data.jsonstateslist.length;i++){>