Checklist Dropdown (help + enjoy)

Discussion Ask a question
,
1

Hi all ,

I made a dynamic drop-down check list

1800×902 69 KB

1772×991 67.7 KB

when a user click on select country red button it is working fine except one test schenerio

test cases :-

  1. when click on select country (red box):- dropdwon apperar =>>>>>>> PASS
  2. when click again on select country(red box) :- dropdown hide=>>>>>> Pass
  3. when click on any otherdrop down /box / button / empty page :- dropdown hide =>>>> Pass
4) when click on any other html element ( the one in the left of the screen)
   :- dropdown should Hide =>>>>>> FAIL( it is not hiding)

Any one help me  to hide my drop down when someone click on html elemnt .

my drop down is made of made of iteslf HTML element attached into a container box.
code:-

var C1=false,P1=false;
export function container1_click(event) {// select country container
	console.log("containrt click");
	if(C1===true)
	C1=false;
	else
	C1=true;
	//Add your code for this event here: 
}

export function page1_click(event) {debugger;
	P1=true;
	console.log("page click");
if(C1===true && P1===true)
{if($w("#container2").hidden)
	$w("#container2").show();
else
$w("#container2").hide();
	C1=false;
}
else if(C1===false && P1===true)
{if($w("#container2").isVisible);
	$w("#container2").hide();
}
}

export function container3_click(event) {// testing click container
console.log("testcContainer");
	//Add your code for this event here: 
}

it is working fine in all schenerio . accept if any user if click or start work with any other html element on page i cannot control the hidden property of my drop down . any way to resolve it.

the above can be solved by attaching a HTML element in a container , but is there any way that if my page HTML elements are not in the container can i handle this hide and display of my dropdown .

==============================************========================

              Some people/posts where requesting multiple input drop down , if some one wants to use the code find below , adjust according to your needs 

for people who require thsi functionality  please find teh code below

Function to extract the data and send it to html element using postmessage

//Public function  to fill my drop down with values  pass  the  html elemt name 

import wixData from 'wix-data';

export function CountryDetail(SelectionName)
{var TotalCount;
 var test=[];
 
	wixData.query("CountryDetail")
		.find()
		.then((results) => {			
			console.log("*****--------*****");
			let item = results.items;
			TotalCount = item.length;
			console.log("item length", item.length);
		
		for (let i = 0; i < TotalCount; i++) {	
			    test[i] = {
				label: item[i].name,
				value: item[i].country_code.toString()
			};
		
		
		}
          
		// $w(SelectionName).options = test;
     $w(SelectionName).postMessage(test);
     	});
     	}

HTML drop down fill code

<!DOCTYPE html>
<html>
	<head>
	</head>

		<div class="container">
		<div id="txt"></div> 
		<style>
	 input {
    float:left; outline-color: "3D9BE9";
}
label  {
    display:table; 
	 
    color:#3D9BE9;
    margin-left: -25px;
    padding-left: 25px;
}

input[type="checkbox"]:checked + label {
    background: brown;
}		
			
			input { float:left; colour:  "#3D9BE9"}
			label { display:table; }
			</style>
	
	</style>
		<script type="text/javascript"> 
		
        function checkBoxName(txt, arr)
		{debugger;
		var checkbox=[];
		var label=[];
		for(var i=0;i<arr.data.length;i++)
			{ 
			var txt= document.getElementById ("txt");
			checkbox[i] = document.createElement('input');
			checkbox[i].type = "checkbox";
			checkbox[i].name = arr.data[i].label;
			checkbox[i].value =arr.data[i].value;
			checkbox[i].id = "id_"+i;
			checkbox[i].onclick =function () 
					{debugger;
						doFunction(checkbox);
					};
		
		label[i] = document.createElement('label')
		label[i].htmlFor = "id_"+i;
		label[i].appendChild(document.createTextNode(arr.data[i].label)); //label[i].htmlFor));
		txt.appendChild(checkbox[i]);
		txt.appendChild(label[i]);
		txt.appendChild(document.createElement("br"));
		
		  }
        }
		function doFunction(checkbox)
		{debugger;
		k=0;
		var checkedValue = [];
		 var inputElements = checkbox;
			for(var i=0; i<inputElements.length; ++i)
			{
				if(inputElements[i].checked)
				{ 
					checkedValue[k] = inputElements[i].value;
					k++;
				}
			}
		
		console.log(checkedValue +"\n");
		}
	   window.onmessage = function(event)
				{ 
                   checkBoxName('txt',event);
				}; 
</script>
</div> 
</html>

Control of the clicks

$w.onReady(function () {debugger;
console.log("ready");
CountryDetail("#html2");
});
  • Add the code which i pasted above under test schenerio .
1 Like