drown down left to right search and vice versa

Programming Assignments

JS Based all question list

Java Script Based FAQ

Q 1 How to search drop down left to right and vice versa (country city example).

asked 10 Nov'19

<!DOCTYPE html>
<html>
<body onload="setCountry()">
<center>
Country<select id="country" onchange="setCity()">
   <option value="" selected="selected">-- Select Country --</option>

</select>
Capital<select id="city" onchange="getcountry()">
   <option value="" selected="selected">-- Select City --</option>
</select>
</center>
<p id="demo"></p>

<script>

  var cityAll="";
  var CountryAll="";
function setCountry()
{
 
 var str1="   INDIA:MUMBAI, INDIA:PUNE,  PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA,  USA:TEXAS,  USA:SAN DIEGO, INDIA:DELHI,      ";

 
 var  str1=str1.trim();
  //var country="<option value='' selected='selected'>-- Select Country --</option>";
 countryAll="";
cityAll="";
  while(str1.length>0)
  {
 
    if(str1.indexOf(":")!=-1) // index value colon tak chalegi na chalne par iski value not equal to -1 hogi
   
    {
var c=str1.substring(0,str1.indexOf(":"));
var c1=str1.substring(str1.indexOf(":")+1,str1.indexOf(","));

if(countryAll.indexOf(c)==-1)
{
countryAll=countryAll+"<option value="+c+">"+c+"</option>";
}
if(cityAll.indexOf(c1)==-1)
{
cityAll=cityAll+"<option value="+c1+">"+c1+"</option>";
}

str1=str1.substring(str1.indexOf(",")+1);
str1=str1.trim();
}
else
{
str1="";
}



    }

countryAll=countryAll+"<option value=All>All</option>";
cityAll=cityAll+"<option value=All>All</option>";
 
  document.getElementById("country").innerHTML = countryAll;
  document.getElementById("city").innerHTML = cityAll;




}
function setCity()
{
var str = "  INDIA:MUMBAI, INDIA:PUNE,  PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA, USA:TEXAS, USA:SAN DIEGO, INDIA:DELHI,     ";

 
  var  str=str.trim();
  var city="";

  var country=document.getElementById("country").value.trim();
 

 
  while(str.length>0)
  {
 
    if(str.indexOf(country)!=-1)
   
    {
 str=str.substring(str.indexOf(country));
var c=str.substring(str.indexOf(country)+country.length+1,str.indexOf(","));
city=city+"<option value="+c+">"+c+"</option>";  
str=str.substring(str.indexOf("c")+c.length+1);
str=str.trim();
}
else
{
str="";
}




}

city=city+"<option value=All>All</option>";
  document.getElementById("city").innerHTML = city;
  if(country=='All')
  document.getElementById("city").innerHTML = cityAll;  




}
function getcountry(){
  var str1 = "  ,INDIA:MUMBAI, INDIA:PUNE,  PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA, USA:TEXAS, USA:SAN DIEGO, INDIA:DELHI,     ";

var  str1=str1.trim();
var city=document.getElementById("city").value.trim();
str1=str1.substring(0,str1.indexOf(city)+city.length);  
var c=str1.substring(str1.lastIndexOf(",")+1,str1.lastIndexOf(":"));

var country=country+"<option value="+c+">"+c+"</option>";
country=country+"<option value=All>All</option>";
  document.getElementById("country").innerHTML = country;
  if(city=='All')
  document.getElementById("country").innerHTML = countryAll;  


}

</script>

</body>
</html>

answered 10 Nov'19

Live Preview

[codepen_embed height="265" theme_id="default" slug_hash="RwNPVgR" default_tab="js,result" user="rajputadesh"]See the Pen RwNPVgR by rajput adesh (@rajputadesh) on CodePen.[/codepen_embed]

Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs

Java Script Based FAQ

Q 1 How to search drop down left to right and vice versa (country city example).

asked 10 Nov'19

Sunil tanwar

answered 10 Nov'19

Adesh Rajput

Video/ C Introduction