Modify the Value of Selected Option

Currently, I am retrieving two values from a JSON object. I immediately use one of them and then no longer need it. To simplify things, I decide to pass only a single value to the next page.

The Issue:
The first time I select each option from the dropdown, it works perfectly fine. However, if I deselect an option and then choose it again, the field displays undefined.

My Solution:
I am considering creating an external variable to store the 'old' value. When I change the selection, the previous value will be stored in the external variable. The challenge lies at the beginning where the value is initially null.

Does anyone have a solution for this issue? Or perhaps a better approach to solving the problem altogether?

javascripthtmljquerycssjson

Answer №1

You may want to consider including the entire 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62120d121207104c081122534c53544c52">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2d3e2f722c3a333a3c2b1f6e716e6c716e6b">[email protected]</a>/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a2ffa1b7beb7b1a692e3fce3e1fce3e6">[email protected]</a>/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b16485e575e584f7b0a150a08150a0f">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve the current date and time in PHP?

How do I get the date and time similar to 05-17-05 at 02:33:15 Can you please assist me in writing this in php? Can I use at with the date function in php? ...

phphtml

Tips on hiding the checkbox within the Material UI TextField input when using MenuItems with checkboxes

I've customized the MenuItems in a TextField of type Select to include checkboxes. However, when I select an item from the menu, the checkbox is also displayed in the input field of the TextField. Requirement: I want to hide the checkbox in the TextF ...

javascriptcssreactjsmaterial-ui

Steps for serving audio files in a Spring Boot application

Can someone advise on the best location to place my audio folder in order to reference it as src="audio/audio_name" within an HTML audio tag? I attempted placing it in the resources folder, but when using src="http://localhost:9191/resource ...

javahtmlspring-boot

Is there a way to add an image to an XML file similar to how it's done in HTML

I'm getting some practice with XML and it seems like regular img tags aren't working. Can images be inserted into an XML document in the same way as HTML? ...

htmlcssxmlweb

Creating a visual representation of data using Highcharts: Learn how to display a stacked bar graph along with a line

My goal is to create a stacked graph with lines using the JSON data provided below [{ "TD": "2", "TE": "5", "TI": "3", ...

htmljqueryhighcharts

The event failed to initiate

I have an event that is fired when the number value changes in the <input type="number"> below: <input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1"> <input type="button" class="minus" value=" ...

javascriptjquery

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss

Custom date formatting with jQuery table sorting

I have been using a jQuery plugin called Tablesorter to sort a table. I am facing an issue with sorting dates in the yyyy MMM dd format, especially because my date inputs are in French. Here is an example of how the dates are formatted: 2014 janv. 05 20 ...

javascriptjqueryhtmlasp.nettablesorter

The Ajax submission is functioning perfectly with the exception of the notification feature

An email is still sent and delivered, yet there's no flash message displayed. form: <%= form_for :fb_comment, :url => update_reply_feedback_path, :html => { :id => "reply" }, :remote => true do |f| %> <%= f.text_area ...

ajaxruby-on-rails-3jquery

Extract data from a WordPress custom field using a JSON API extension

Within my Wordpress theme, there exists a custom post type called "songs." Within this post type, there is a custom field named "playlist" which houses information about songs such as artist name, download link, and song lyrics. However, I am facing an is ...

phpjsonwordpress

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

htmlcssangulartypescript

How can I trigger $stateChangeStart in Angular ui-router when using state.go({notify:false})?

My Angular SPA uses ui-router for navigation and infinite scroll functionality. I currently implement infinite scroll by utilizing the following code snippet: $state.go('someStateWithPagination', {page: page+1}, {notify: false, reload: false}) ...

javascriptangularjsgoogle-analyticsangular-ui-router

Finding the initial visible iFrame in a browser window and displaying its content

It's quite a strange situation... This issue only pertains to IE8 and older versions. So, there's this iFrame that's popping up (and I have no way to control or assign an ID to it), thank you Telerik! // The only way to target it would be: ...

javascriptjqueryiframetelerikradwindow

Detecting and clearing custom visual filters in Power BI

Currently, I am developing a unique visual on Microsoft Power BI using d3.js. This customized visual includes a filter effect where selecting filters changes the style properties and adds new items. However, one issue in Power BI is the inability to dete ...

javascripttypescriptd3.jsdata-visualizationpowerbi

100vh nested section with scrolling

I am attempting to create a section that remains fixed as you scroll, allowing the inner articles to scroll by 100vh within the section. Essentially, I want to have a block of section with a height of 100vh and then scroll the inner articles by 100vh: HTM ...

javascripthtmlcss

Tips on updating checkbox background color after being selected

I've been working on creating checkboxes for seat selection in Angular using a TypeScript file, but I'm facing an issue where the background color of the checkbox doesn't change after checking them. Here's my TypeScript function: gener ...

javascripthtmlcssangulartypescript

Unable to proceed with login: Error encountered [ERR_HTTP_HEADERS_SENT]

insert image description here When attempting to log in as a user on my website, I encounter an error. While I can successfully register the user and search for it during login with the correct credentials, if there is any mistake in the username or passw ...

javascriptnode.jsmongodbexpressnodemon

Modifying the Class of an Element Using JQUERY from a Different PHP File

I'm attempting to incorporate an error reporting box using Bootstrap-4. The Alert initially appears with the class of 'collapse' on the registration page: <input type="text" id="inputEmail" class="form-control" name="username" placehol ...

phpjquerybootstrap-4

What is the axis typically designated for the near and far planes in perspective camera settings?

I recently completed a project and went through an informative tutorial on three.js. However, I found the explanation lacking when it came to creating the perspective camera. In my project, I placed an object at the default location of (0,0,0) in the scen ...

javascriptthree.js

transform a json object into an array

I am working with the following script: <script type="text/javascript> jQuery(function($) { var newsList = $('.handsontable'); function updateNews(){ newsList.html("Loading…"); $.ajax({ url: "<?p ...

phpjqueryjsonhandsontable