javascript - 下拉显示只是js

Question

我有一些由 javascript 编写的下拉列表，它工作正常。问题是如何显示第一个下拉列表的标题。

我已经评论了不能工作的地方

var h = document.getElementById("createSelect");
var textdisplay = h.options[h.selectedIndex].text;

Answer 1

创建一个接收数组和字符串并返回特定项目标题的函数。像这样

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

将此函数用于您想要的数组。例如第一个数组的标题

var textdisplay = getTitle(arr1, fId);

并将其添加到您想要的输出位置

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

使用此代码。

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);"
  }
];

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

  tag.appendChild(select);

  //Create and append the options
  for (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);
  }
}

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

function add_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++;
}

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

function calculate() {
  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 = new Function("supposearea", fId);

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

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

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

    // ---- CANNOT WORK
    var 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;
  }
}

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Grass" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>
<p id="Result1"></p>

提示为您的下拉菜单使用特定的id。我为您的 createSelect 函数传递了第三个输入。