Question

我的代码有两个部分：一个用于输入新项目的部分，以及一个与它们交互的部分。每次使用jQuery添加新项目时我都会尝试更新下拉列表，但我当前的方法什么都不做。什么都没有，我的意思是下拉列表将保持为空。我已经尝试过这个问题的先前答案，但都没有奏效。（我对Javascript很新，所以我只是一个菜鸟是完全可能的。）

这是html：

<!DOCTYPE html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link   rel = "stylesheet" type = "text/css" href = "deletion.css"></link>
    <script src = 'chemical.js'></script>
</head>
<body>
    <form id = "newChemicalForm">
        <p id = newChemicalText> Submit new chemicals here: </p>
        <input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
        <button  id = "newChemicalButton" onclick = "addChemical()" > Submit </button>
    </form>
    <form id = "newUsageForm">
        <p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
        <select id = "chemicalDropdown">
        </select>
        <input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
        <input type = "checkbox" id = 'dailyCheckbox'/>
        <p id = "dateText"> Enter the end date below: </p>
        <input type = "date" id = "dateInput"/>
        <button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
    </form>
</body>

和Javascript：

chemicals = [];

function addChemical() {
    var chemical = new Chemical();
    chemicals.push(chemical);

    $('#chemicalDropdown').append('<option value = "' + chemical.name + '"> ' + chemical.name + '</option> \n');
}

function Chemical() {
    this.name   = $('#newChemicalInput').val();
    this.amount = 0;
    this.usages = [];
}

Answer 1

可能＆＃34; \ n＆＃34;在附加代码后面使这不起作用。尝试删除它。

Answer 2

有几件事正在发生。首先，当您按下提交按钮时，它会尝试提交第一个表单。第二：似乎onclick事件没有绑定到应该将项添加到下拉列表的方法。

我已经更新了几件事：

添加$(document).ready(...);，因为这是最佳做法。
我删除了内联onclick并通过jQuery绑定了click事件。

JSFiddle here...

<form id = "newChemicalForm">
    <p id = newChemicalText> Submit new chemicals here: </p>
    <input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
    <button type="button" id = "newChemicalButton" > Submit </button>
</form>
<form id = "newUsageForm">
    <p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
    <select id = "chemicalDropdown">
    </select>
    <input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
    <input type = "checkbox" id = 'dailyCheckbox'/>
    <p id = "dateText"> Enter the end date below: </p>
    <input type = "date" id = "dateInput"/>
    <button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
</form>

和JS：

$(document).ready(function(){
  var chemicals = [];

  $("#newChemicalButton").on("click",function(){
    addChemical();
  });

  function addChemical() {
      var chemical = new Chemical();
      chemicals.push(chemical);

      $('#chemicalDropdown').append("<option value=" + chemical.name + ">" + chemical.name + "</option>");
  }

  function Chemical() {
      this.name   = $('#newChemicalInput').val();
      this.amount = 0;
      this.usages = [];
  }
});

尝试添加一个选项以选择附加，并且没有任何反应

2 个答案: