CODEWITHSUNDEEP
javascripthtmljquerycssjson
BeeTheKay
BeeTheKay

Reputation: 319

Change Value of Select option

I am currently getting tow values with a JSON object. I use one of them instantly and have after that no need for it.
I am making it easier for myself and just give one single value to the next site.

The Problem:
The first time I use each option of the Select it works perfectly fine. But I delete the definition of the option so if I choose the same option again, the field will say undefined.

My thoughts:
I thought of creating an external variable for the 'old' value and then the next time I change the option it changes the value of the last option to the external variable.
The problem with this method would be the beginning because in the beginning the value is null

Does anyone have a solution for that? Or a better way for me to solve the complete thing?

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/[email protected]/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/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 0

Views: 304

Answers (1)

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You should probably add the whole object as a value :

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/[email protected]/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/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Related Questions