Any suggestion to make my javascript + html code smaller

27
April 23, 2019, at 00:40 AM

Hello I have the code below that is for all country in the world (code become too big so I just copy a little of it)

<div class="dropdown w-100">
  <button onclick="myFunction()" class=" form-control selecter w-100" id="city">City - شهر</button>
  <div id="myDropdown" class="dropdown-content" style="height: auto;max-height: 400px;overflow-x: hidden;">
  </div>
</div>
</div>
<div class="col-md-3">
  <select class="form-control selecter selectpicker" id="type" data-live-search-style="startsWith" data-live-search="true">
    <option value="item0">--Select an Item--</option>
    <option value="item1">Afghanistan</option>
    <option value="item2">Albania</option>
    <option value="item3">Algeria</option>
    <option value="item4">Andorra</option>
    <option value="item5">Angola</option>
    <option value="item6">Antigua and Barbuda</option>
    <option value="item7">Argentina</option>
    <option value="item8">Armenia</option>
    <option value="item9">Australia</option>
    <option value="item10">Austria</option>
    </section>
</div>

So when ever I choose one of the options with JS the other div(#myDropdown) get all the city of that option's country

$(document).ready(function () {
$("#type").on('change',function () {
    if (this.value == "item1") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Herat</a><a href='#' onclick='inputFunction(innerHTML)'>Kabul</a><a href='#' onclick='inputFunction(innerHTML)'>Kandahar</a>");
    }  else if (this.value == "item2") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Berat</a><a href='#' onclick='inputFunction(innerHTML)'>Durres</a><a href='#' onclick='inputFunction(innerHTML)'>Elbasan</a><a href='#' onclick='inputFunction(innerHTML)'>Fier</a><a href='#' onclick='inputFunction(innerHTML)'>Pogradec</a>");
    }  else if (this.value == "item3") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Adrar</a><a href='#' onclick='inputFunction(innerHTML)'>Algiers</a><a href='#' onclick='inputFunction(innerHTML)'>Ain Salah</a><a href='#' onclick='inputFunction(innerHTML)'>Bordj El Haouas</a><a href='#' onclick='inputFunction(innerHTML)'>Ouargla</a><a href='#' onclick='inputFunction(innerHTML)'>Tit</a>");
    } else if (this.value == "item4") {
        $("#myDropdown").html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'><a href='#' onclick='inputFunction(innerHTML)'>Andorra la Vella</a><a href='#' onclick='inputFunction(innerHTML)'>El Pas de la Casa</a><a href='#' onclick='inputFunction(innerHTML)'>La Massana</a><a href='#' onclick='inputFunction(innerHTML)'>Soldeu</a>");
    } else if (this.value == "item5") {

with all country this code is big is there any way to make it smaller? better way? (sry if my question is duplicate, I just didn't find it)

Answer 1

You could use an object that holds your data like :

let data = {
   item1: ["Herat", "Kabul", "Kandahar"],
   item2: ["Berat", "Durres", "Elbasan", "Fier", "Pogradec"]
}

Then fetch the related links text base on the selected option and loop through them building the anchors.

$(document).ready(function() { 
  let dropdown = $("#myDropdown"); 
  let data = { 
    item1: ["Herat", "Kabul", "Kandahar"], 
    item2: ["Berat", "Durres", "Elbasan", "Fier", "Pogradec"] 
  } 
 
  $("#type").on('change', function() { 
    dropdown.html("<input type='text' placeholder='Search..' id='myInput' onkeyup='filterFunction()'>"); 
 
    $.each(data[this.value], function(i, o) { 
      dropdown.append("<a href='#' onclick='inputFunction(innerHTML)'>" + o + "</a> | "); 
    }); 
 
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="dropdown w-100"> 
  <div id="myDropdown" class="dropdown-content" style="height: auto;max-height: 400px;overflow-x: hidden;"> 
    <div class="col-md-3"> 
      <select class="form-control selecter selectpicker" id="type" data-live-search-style="startsWith" data-live-search="true"> 
        <option value="item0">--Select an Item--</option> 
        <option value="item1">Afghanistan</option> 
        <option value="item2">Albania</option> 
      </select> 
    </div>

Answer 2
let countries = {
    a : [ "Australia" , "Algeria" .....]
    b : [ "Bulgaria" , "Burkina Faso" ...]
    and so on...
};

simple object with arrays. this is what I would have do.

READ ALSO
how i sending an auth error from node js to my html client page?

how i sending an auth error from node js to my html client page?

Im new to node js and now im rewriting my website , I scripting the log in page , my issue is to send back to the client page the error message

49
Reload perticular textbox/select option using javaScript

Reload perticular textbox/select option using javaScript

I want to refresh/reload a particular textbox/ Select option using javaScriptJust like when the page loads for the first time

44
How to avoid triggering of repeated pubnub notification via JS on webpage return

How to avoid triggering of repeated pubnub notification via JS on webpage return

I have a problem with JS bootstrap notify event on using with pubnub

46
foreach loop array promise not being returned

foreach loop array promise not being returned

I want to access a subcollection called 'followers' from a given id under the 'mobile_user', this contains the id's of the followersI want to loop through each of the id's in the followers subcollection and query data from the 'mobile_user' collection

19