下拉显示只是js

Question

我有几个通过javascript下拉列表，它工作正常。 问题是如何显示第一个下拉列表的标题。

我评论了无法工作的地方

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

Answer 1

我在您的代码中进行了以下修改/增强：
（我知道暂时没有回答这个问题，但我在等你的澄清。）

1. 将id更改为className，因为您不应该有多个相同的ID，
2. 将array移到其功能之外
3. 删除了＆＃34;重复＆＃34;函数并向剩余的函数添加第二个参数。

请参阅我的评论片段以获取更多详细信息：

＆＃13;
＆＃13;
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 function
function createSelect(tag, array) {
  var select = document.createElement("select");
  select.className = "select-" + rowNumber; // TAKIT: Changed .id to .className
  tag.appendChild(select);
  // 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);
  }
}

// TAKIT: Removed the other createSelect1 and 2 functions, they were similar

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);

  // TAKIT: Using the same function for the 3 lines below, with the new 2nd parameter
  createSelect(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++;
}

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 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;

  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

欢迎评论任何修改。

希望它有所帮助，无论如何！

Answer 2

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

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;

使用此代码。

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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