更改选择选项的值

Posted 2023-05-08

【中文标题】更改选择选项的值

【英文标题】：Change Value of Select option

【发布时间】：2020-10-20 21:58:42

【问题描述】：

我目前正在使用 JSON 对象获取两个值。我立即使用其中一个，之后就不需要它了。 我让自己变得更容易，只为下一个站点提供一个值。

问题： 我第一次使用 Select 的每个选项时，效果都很好。但是我删除了选项的定义，所以如果我再次选择相同的选项，该字段将显示undefined。

我的想法： 我想为“旧”值创建一个外部变量，然后下次更改选项时，它将最后一个选项的值更改为外部变量。 这种方法的问题是开始，因为一开始的值是null

有人对此有解决方案吗？还是有更好的方法让我解决完整的问题？

function oeFunction() 
  var oeSelect = document.getElementById("oeSelect");
  var obj = JSON.parse(oeSelect.value);
  document.getElementById("oeDefinition").value = obj.definition;
  oeSelect[oeSelect.selectedIndex].setAttribute('value', obj.id);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css" type="text/css"> 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/d84fe1d5b8.js"></script>
        
<!-- Bootstrap Select Plugins -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>

<div class="container">
  <div class="row">
      <div class="col-lg-3">
        <label for="oeSelect">OE: </label>
      </div>
      <div class="col-lg-4">

        <select onchange="oeFunction()" id="oeSelect" name="oeteam" class="selectpicker form-control" data-live-search="true" required>
          <option value="" selected disabled>Keine Auswahl</option>
          <option value='"definition":"Hello World","id":"1"'>Hello</option>
          <option value='"definition":"Can you hear me?", "id":"2"'>Can you hear?</option>
        </select>
      </div>

      <div class="col-lg-3">
        <input class="form-control mb-2 mr-sm-2" type="text" id="oeDefinition" placeholder="Definition will appear here.." disabled>
      </div>
    </div>
  </div>

【问题讨论】：

问题出在这里：oeSelect[oeSelect.selectedIndex].setAttribute('value', obj.id); 你正在用obj.id（一个数字）覆盖value（一个JSON）

【参考方案1】：

您可能应该将整个对象添加为一个值：

oeSelect[oeSelect.selectedIndex].setAttribute('value', JSON.stringify("definition" : obj.definition,"id" : obj.id));

function oeFunction() 
  var oeSelect = document.getElementById("oeSelect");
  var obj = JSON.parse(oeSelect.value);
  document.getElementById("oeDefinition").value = obj.definition;
  oeSelect[oeSelect.selectedIndex].setAttribute('value', JSON.stringify(
    "definition": obj.definition,
    "id": obj.id
  ));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/d84fe1d5b8.js"></script>

<!-- Bootstrap Select Plugins -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <label for="oeSelect">OE: </label>
    </div>
    <div class="col-lg-4">

      <select onchange="oeFunction()" id="oeSelect" name="oeteam" class="selectpicker form-control" data-live-search="true" required>
        <option value="" selected disabled>Keine Auswahl</option>
        <option value='"definition":"Hello World","id":"1"'>Hello</option>
        <option value='"definition":"Can you hear me?", "id":"2"'>Can you hear?</option>
      </select>
    </div>

    <div class="col-lg-3">
      <input class="form-control mb-2 mr-sm-2" type="text" id="oeDefinition" placeholder="Definition will appear here.." disabled>
    </div>
  </div>
</div>