Skip to content Skip to sidebar Skip to footer
Home / Javascript

Dropdown Display Just Js

Post a Comment
I have a few dropdown lists that are by javascript and it is working fine. The question is how do I display out the title of the first dropdown. I have commented on the place that

Solution 1:

Create a function which receives an array and a string and return title of spesific item. like this

functiongetTitle(arr, val) {
  var item = arr.find(function(itm) {
    return itm['value'] == val;
  });
  return item['title'];
}

Use this function for array you want. for example title of first array

var textdisplay = getTitle(arr1, fId);

And add that where you want as output

document.getElementById("Result").innerHTML +=
  "Answer " +
  ++answer +
  ") " +
  area +
  " ----" +
  func(area) +
  "<br>" +
  amount / discount +
  "<br>" +
  soilamount +
  "<br>" +
  textdisplay;

Use this code.

var rowNumber = 0;
var arr1 = [{
    title: "10mm",
    value: "return 2;"
  },
  {
    title: "20mm",
    value: "return 2;"
  },
  {
    title: "30mm",
    value: "return 3;"
  },
  {
    title: "40mm",
    value: "return 4;"
  },

  {
    title: "title 1",
    value: "return Math.min( Math.max(2 / 100 * supposearea + 11.7222222222222, 9.5), 11.5 );"
  },
  {
    title: "title 2",
    value: "return Math.min(Math.max(2 / 100 * supposearea + 10.2222222222222, 8), 10);"
  },
  {
    title: "title 3",
    value: "return Math.min( Math.max(2 / 200 * supposearea + 11.7222222222222, 9.5), 11.5 );"
  },
  {
    title: "title 4",
    value: "return Math.min(Math.max((2/200*supposearea + 13.7222222222222),11.5),13.5);"
  }
];
var arr2 = [{
    title: "Original",
    value: "0.65"
  },
  {
    title: "35% Discount",
    value: "1"
  }
];
var arr3 = [{
    title: "No Soil",
    value: "return 0;"
  },
  {
    title: "Soil",
    value: "return Math.min(Math.max((2*(areas) + 3), 2),4);"
  }
];

functioncreateSelect(tag, id, array) {
  var select = document.createElement("select");
  select.id = id + "-" + rowNumber;

  tag.appendChild(select);

  //Create and append the optionsfor (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

functiongetTitle(arr, val) {
  var item = arr.find(function(itm) {
    return itm['value'] == val;
  });
  return item['title'];
}

functionadd_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);

  createSelect(p, 'sel1', arr1);
  createSelect(p, 'sel2', arr2);
  createSelect(p, 'sel3', arr3);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute(
    "onclick",
    'remove_field("input_text' + rowNumber + '_wrapper")'
  );
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

functionremove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

functioncalculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById("field_div").getElementsByTagName("p");
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;

    var fId = ps[i].childNodes[2].value;
    var func = newFunction("supposearea", fId);

    var discount = ps[i].childNodes[3].value;

    var funcId = ps[i].childNodes[4].value;
    var soil = newFunction("areas", funcId);

    var amount = area * func(area);
    var soilamount = area * soil(area);

    // ---- CANNOT WORKvar textdisplay = getTitle(arr1, fId);
    // -- PLS CHECK CHECK HERE----------------------------------------------->var statement;
    if (soilamount < 1) {
      statement = "Total Impe ";
    } else {
      statement = "Got Soil";
    }

    document.getElementById("Result").innerHTML +=
      "Answer " +
      ++answer +
      ") " +
      area +
      " ----" +
      func(area) +
      "<br>" +
      amount / discount +
      "<br>" +
      soilamount +
      "<br>" +
      textdisplay;
    document.getElementById("Result1").innerHTML += statement;
  }
}
<divid="wrapper"><divid="field_div"><inputtype="button"value="Grass"onclick="add_field();"></div></div><p><buttontype="button"onclick="calculate()">Calculate</button></p><pid="Result"></p><pid="Result1"></p>

Tip Use specific ids for your drop downs. I pass a third input for your createSelect function.

Solution 2:

I did the following modifications/enhancements in your code: (I know that doesn't answer the question for the moment, but I am waiting for your clarifications.)

  1. Changed id to className, as you shouldn't have multiple identical ids,
  2. Moved the arrays outside of their functions,
  3. Removed the "duplicate" functions and added a second parameter to the remaining one.

See snippet with my comments for more details:

var rowNumber = 0;

// TAKIT: Moved arrays outside of the functions,// as the functions were similar we'll be only using one!// (We could rename those arrays to have a meaningfull variable name)var array1 = [{
    title: "10",
    value: "return 10;"
  },
  {
    title: "20",
    value: "return 20;"
  },
  {
    title: "30",
    value: "return 30;"
  },
  {
    title: "40",
    value: "return 40;"
  },
  {
    title: "50",
    value: "50;"
  },
  {
    title: "60",
    value: "60;"
  },
  {
    title: "70",
    value: "70;"
  },
  {
    title: "80",
    value: "return Math.min(Math.max((3/-500*supposearea + 103.7),50.5),60);"
  }
];

var array2 = [{
    title: "Original",
    value: "0.65"
  },
  {
    title: "35% Discount",
    value: "1"
  }
];

var array3 = [{
    title: "No Soil",
    value: "return 0;"
  },
  {
    title: "Soil",
    value: "165.3;"
  }
];


// TAKIT: Added 2nd parameter in this functionfunctioncreateSelect(tag, array) {
  var select = document.createElement("select");
  select.className = "select-" + rowNumber; // TAKIT: Changed .id to .className
  tag.appendChild(select);
  // Append the optionsfor (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

// TAKIT: Removed the other createSelect1 and 2 functions, they were similarfunctionadd_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);

  // TAKIT: Using the same function for the 3 lines below, with the new 2nd parametercreateSelect(p, array1);
  createSelect(p, array2);
  createSelect(p, array3);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + rowNumber + '_wrapper")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

functionremove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

functioncalculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById('field_div').getElementsByTagName('p');
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;

    var fId = ps[i].childNodes[2].value;
    var func = newFunction("supposearea", fId);

    var discount = ps[i].childNodes[3].value;

    var funcId = ps[i].childNodes[4].value;
    var soil = newFunction("areas", funcId);

    var amount = area * (func(area));
    var soilamount = area * (soil(area));

    // -- CANNOT WORK -----------------------------------var h = document.getElementById("createSelect"); // TAKIT: null, because id "createSelect" doesn't exist. What are you trying to do?var textdisplay = h.options[h.selectedIndex].text;

    // -- PLS CHECK CHECK HERE --------------------------var statement;
    if (soilamount < 1) {
      statement = "Total Impe ";
    } else {
      statement = "Got Soil";
    }


    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + " ----" + func(area) + '<br>' + amount / discount + '<br>' + soilamount + "<br>";
    document.getElementById("Result1").innerHTML += statement;

  }
}
<divid="wrapper"><divid="field_div"><inputtype="button"value="Grass"onclick="add_field();"></div></div><p><buttontype="button"onclick="calculate()">Calculate</button></p><pid="Result"></p><pid="Result1"></p>

Feel free to comment for any modification.

Hope it helps, anyway!

You may like these posts

Post a Comment for "Dropdown Display Just Js"