Попытка добавить опцию для выбора с помощью append, и ничего не происходит

Мой код имеет два раздела: Раздел для ввода новых элементов и раздел для взаимодействия с ними. Я пытаюсь обновить выпадающий список каждый раз, когда новый элемент добавляется с jQuery, но мой текущий метод ничего не делает. Под ничто я подразумеваю, что выпадающий список останется пустым. Я пробовал предыдущие ответы на этот вопрос, но ни один не сработал. (Я довольно новичок в Javascript, так что меня просто быть noob вполне возможно).

Вот 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 = [];
}

2 ответа

  1. Возможно, «\n » за добавлением кода сделать это не работает. Попробуйте удалить его.

  2. Происходит несколько вещей. Во-первых, при нажатии кнопки Отправить он пытается отправить первую форму. Во-вторых: похожеonclick, что событие не привязывается к методу, который должен добавить элемент в раскрывающийся список.

    Я обновил несколько вещей:

    • Добавил$(document).ready(...);, как это лучшая практика.
    • Я удалил встроенное onclickи привязал событие click через jQuery.

    JSFiddle здесь.

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