Добавить тег выбора с меткой к HTML для динамически jQuery - PullRequest
Новая
       1

Добавить тег выбора с меткой к HTML для динамически jQuery

0 голосов
/ 23 февраля 2020

Я пишу форму в HTML и JQuery. Я хотел бы добавить поля форм динамически, после загрузки страницы.

У меня есть это в HTML файле: 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="index.js"></script>
</head>
<body>
    <div id="form-database-settings">
        <label for="database_section">Database Settings</label>
        <form id="database_section" class="form-settings">
        </form>
        </div>
</body>
</html>

и это в моем JS файле: 

var dataset_options = [
    {
        text:"text1",
        value:"value1"
    },
    {
        text:"text2",
        value:"value1"
    }
];


window.onload = () => {
    createDatabaseSettingsForm();
}

function createDatabaseSettingsForm(){
    var formDatabaseSettings = $("#database_section")[0];
    var datasetSelect = create_select_button("Dataset", "dataset_selector", "query-form-class", dataset_options)
    formDatabaseSettings.appendChild(datasetSelect);
}

function create_select_button(label_value, select_id, select_class, options){
    var div = document.createElement("div");
    var label = document.createElement("label");
    label.setAttribute("for", select_id);
    label.setAttribute("value", label_value);
    div.appendChild(label);

    var select = document.createElement('select');
    select.setAttribute("id", select_id);
    select.setAttribute("class", select_class);

    for (var option_index in options){
        select.append($('<option value=${options[i].value}>${options[i].text}</option>'));
        // select.append($("<option value=3>this is a text</option>"));
    }

    div.appendChild(select);

    return div;
}

enter image description here

это выход. Я хотел бы иметь метку и элементы в элементе выбора. Что я делаю не так?

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Вы не можете смешивать jQuery и Vanilla JS, потому что это не легко читается, и вы делаете код для спагетти, и это не очень хорошая практика. Я изменил ваш код и добавил пример с Vanilla JS и jQuery (jquery также для кодовandobx)

https://codesandbox.io/s/serene-mestorf-1wq9u

Vanilla JS

const dataset_options = [
  {
    text: "text1",
    value: "value1"
  },
  {
    text: "text2",
    value: "value1"
  }
];

function createDatabaseSettingsForm() {
  const formDatabaseSettings = document.querySelector("#database_section");
  console.log(formDatabaseSettings);
  const datasetSelect = createSelectButton(
    "Dataset",
    "dataset_selector",
    "query-form-class",
    dataset_options
  );
  formDatabaseSettings.appendChild(datasetSelect);
}

function createSelectButton(label_value, select_id, select_class, options) {
  const div = document.createElement("div");
  const label = document.createElement("label");
  label.setAttribute("for", select_id);
  label.setAttribute("value", label_value);
  div.appendChild(label);

  const select = document.createElement("select");
  select.setAttribute("id", select_id);
  select.setAttribute("class", select_class);

  for (const option in options) {
    const optionEl = document.createElement("option");

    optionEl.setAttribute("value", options[option].value);
    optionEl.innerHTML = options[option].text;

    select.appendChild(optionEl);
  }

  div.appendChild(select);

  return div;
}

createDatabaseSettingsForm();
    <div id="form-database-settings">
      <label for="database_section">Database Settings</label>
      <form id="database_section" class="form-settings"></form>
    </div>

jQuery

const dataset_options = [
  {
    text: "text1",
    value: "value1"
  },
  {
    text: "text2",
    value: "value1"
  }
];

$(document).ready(() => {
  createDatabaseSettingsForm();
});

function createDatabaseSettingsForm() {
  const formDatabaseSettings = $("#database_section");
  const datasetSelect = createSelectButton(
    "Dataset",
    "dataset_selector",
    "query-form-class",
    dataset_options
  );
  formDatabaseSettings.append(datasetSelect);
}

function createSelectButton(label_value, select_id, select_class, options) {
  const div = $("<div/>");
  const label = $("<label/>");
  label.attr("for", select_id);
  label.attr("value", label_value);
  div.append(label);

  const select = $("<select />");
  select.attr("id", select_id);
  select.attr("class", select_class);

  for (const option in options) {
    select.append(
      $(
        `<option value=${options[option].value}>${
          options[option].text
        }</option>`
      )
    );
  }

  div.append(select);

  return div;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="form-database-settings">
      <label for="database_section">Database Settings</label>
      <form id="database_section" class="form-settings"></form>
    </div>
1 голос
/ 23 февраля 2020

Надеюсь, это поможет вам. 

var dataset_options = [{
    text: "text1",
    value: "value1"
  },
  {
    text: "text2",
    value: "value1"
  }
];


window.onload = () => {
  createDatabaseSettingsForm();
}

function createDatabaseSettingsForm() {
  var formDatabaseSettings = $("#database_section")[0];
  var datasetSelect = create_select_button("Dataset", "dataset_selector", "query-form-class", dataset_options)
  formDatabaseSettings.appendChild(datasetSelect);
}

function create_select_button(label_value, select_id, select_class, options) {
  var div = document.createElement("div");
  var label = document.createElement("label");
  label.setAttribute("for", select_id);
  label.setAttribute("value", label_value);
  div.appendChild(label);

  var select = document.createElement('select');
  select.setAttribute("id", select_id);
  select.setAttribute("class", select_class);

  for (var i in options) {
    console.log(options);
    var option = document.createElement("option");
    option.text = options[i].text;
    option.value = options[i].value;
    select.append(option);
    // select.append($("<option value=3>this is a text</option>"));
  }

  div.appendChild(select);

  return div;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-database-settings">
  <label for="database_section">Database Settings</label>
  <form id="database_section" class="form-settings">
  </form>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...