Select 選項的更改值

Question

我目前正在使用 JSON object 獲得兩個值。 我立即使用其中一個，之后就不需要它了。
我讓自己更容易，只為下一個站點提供一個單一的值。

問題：
我第一次使用 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>

Answer 1

您可能應該將整個 object 添加為值：

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>