如何使用javascript为选项添加价值

Question

这是我的 js 代码

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  tag.value = "";
  span.setAttribute("onclick", "this.remove()");

  tags.append(span);
}

function addOption() {
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = tags.textContent;
  x.add(option);
}

一旦用户点击标签，它将关闭应该显示选项的值，但我只设法在选项内创建一个空白区域。

Here is related JS Fiddle

Answer 1

将tags span 更改为包含所有option spans。

然后让tags 中的每个span 负责将自己添加回select 并从tags span 中删除自己。

请按照上述逻辑查看代码的变化。

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  tag.value = ""; //clear the field when choose or pressed enter key
  span.style.backgroundColor = "#E5E6E7";
  span.style.margin = " 5px";
  span.style.padding = "5px";

  //span will add itself back to select and remove itself from tags
  span.setAttribute("onclick", "addOption(this)");

  if (span.textContent == "Fast Food") {
    $('option[value="Fast Food"]').remove();
  } else if (span.textContent == "Vegan") {
    $('option[value="Vegan"]').remove();
  } else {
    $('option[value="Food"]').remove();
  }
  tags.append(span);
}

function addOption(span) {
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = span.textContent;
  x.add(option);
  span.remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
  <div class="form-group">
    <label class="control-label">Food Type</label><br>
    <span id="tags"></span>

    <select id="tag" onchange="addTag(this)" class="form-control">
      <option value="">-All-</option>
      <option value="Fast Food">Fast Food</option>
      <option value="Vegan">Vegan</option>
      <option value="Food">Food</option>
    </select>
  </div>
</div>

Answer 2

由于您使用的是 jQuery，我们可以使用事件系统。这使得代码更简洁。

您的代码的主要问题是您试图获取textContent 的tags，其中*不作为变量存在。相反，它将引用id="tags" 元素。

textContent 只返回那个元素的文本值，而不是它的子元素。在这种情况下，它是空的。

// here we use jQuery's event system to define what happens
// for the events below    
$(document)
    .on("click", ".tag", function(){
        removeTag(this);
    })
    .on("change", "#tag", function(){
        addTag(this);
    });

function removeTag(tag){
    addOption(tag.textContent);
    tag.remove();
}

function addTag(tag) {
    var tags = document.getElementById("tags"),
        span = document.createElement("span");

    span.textContent = tag.value;

    tag.value = ""; //clear the field when choose or pressed enter key
    
    // could you add the following styles as a class?
    span.style.backgroundColor = "#E5E6E7";
    span.style.margin          = "5px";
    span.style.padding         = "5px";

    span.className = "tag";
    
    // no need to set `onclick` here as we're handling at the top of this code
    
    // we can use the text to find the element
    // instead of a repeating if else statment
    $('option[value="' + span.textContent + '"]').remove();

    tags.append(span);
}

function addOption(text) {
    var x      = document.getElementById("tag"),
        option = document.createElement("option");

    option.textContent = text;

    // we also need to set the value here
    // since we're looking for it in `addTag`
    option.value = text

    x.add(option);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
  <div class="form-group">
    <label class="control-label">Food Type</label><br>
    <span id="tags"></span>

    <select id="tag" class="form-control">
      <option value="">-All-</option>
      <option value="Fast Food">Fast Food</option>
      <option value="Vegan">Vegan</option>
      <option value="Food">Food</option>
    </select>
  </div>
</div>

ES6 和改进

$(document)
    .on("click", ".tag", (event) => removeTag(event.currentTarget))
    .on("change", "#tag", (event) => addTag(event.currentTarget));

function removeTag(tag){
    addOption(tag.textContent);
    tag.remove();
}

function addTag(tag) {
    let tags = $("#tags"),
        span = $('<span class="tag" />');

    span.text(tag.value);

    tag.value = ""; //clear the field when choose or pressed enter key
    
    // we can use the text to find the element
    // instead of a repeating if else statment
    $(`option[value="${span[0].textContent}"]`).remove();

    tags.append(span);
}

function addOption(text) {
    let x      = $("#tag"),
        option = $('<option />');

    option
        .text(text)
        .val(text);

    x.append(option);
}

.tag {
  background-color: #E5E6E7;
  margin: 5px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
  <div class="form-group">
    <label class="control-label">Food Type</label><br>
    <span id="tags"></span>

    <select id="tag" class="form-control">
      <option value="">-All-</option>
      <option value="Fast Food">Fast Food</option>
      <option value="Vegan">Vegan</option>
      <option value="Food">Food</option>
    </select>
  </div>
</div>

Answer 3

你犯了一些逻辑错误， 您可以按如下方式更新小提琴：

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  span.setAttribute("onclick", "removeTag(this);");
  tag.options[tag.selectedIndex].remove();
  tags.append(span);
}

function removeTag(elm) {
    elm.remove();
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = elm.textContent;
  x.add(option);
}

#tags span{
  background-color: #E5E6E7;
  margin:5px;
  padding:5px;
  cursor: pointer;
}

<div class="col-sm-3">
  <div class="form-group">
    <label class="control-label">Food Type</label><br>
    <span id="tags"></span>

    <select id="tag" onchange="addTag(this)" class="form-control">
      <option value="">-All-</option>
      <option value="Fast Food">Fast Food</option>
      <option value="Vegan">Vegan</option>
      <option value="Food">Food</option>
    </select>
  </div>
</div>