Enhancing an options tag with Dojo Framework

I am experiencing difficulties updating the label of a selected option in a Dojo-created select field, despite having a form to 'rename' the selected option.

Various methods have been attempted:

var selectDropdown = registry.byId("stateSelect");
selectDropdown.updateOption({
    value : currentId, // the existing ID to update
    label : this.new_name
});
selectDropdown.reset();

However, the above code does not successfully change the label.

selectDropdown.set("displayedValue", this.new_name);
selectDropdown.reset();

The alternative method described above also fails to update the label, even though:

selectDropdown.get("displayedValue");

Returns the old label that I am attempting to alter.

edit: Here is how the Select field is created and populated with items...

var select = new Select({
    name : "stateSelect",
    }, "stateSelect");

select.addOption({
    value : 0,
    label : "test"});

Answer №1

To accomplish this, you can utilize a mix of .get('selectedOptions') and .updateOption() :

require(['dijit/form/Select'], function(Select) {
  var select = new Select({
    name : "stateSelect"
  }, "stateSelect");
  
  select.addOption({
    value : 0,
    label : "test 0"
  });
  select.addOption({
    value : 1,
    label : "test 1"
  });
  select.addOption({
    value : 2,
    label : "test 2"
  });
  
  
  changeBtn.onclick = function() {
    select.get('selectedOptions').label = (new Date()).toString();
    select.updateOption(select.get('selectedOptions'))
  }
  
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div class="tundra">
  <div id="stateSelect"></div>
  <button id="changeBtn">change selected to current date</button>
</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

Monitor constantly to determine if an element is within the visible portion of the screen

For a thorough understanding of my query, I feel the need to delve deeper. While I am well-versed in solving this issue with vanilla Javascript that is compatible with typescript, my struggle lies in figuring out how to invoke this function throughout th ...

Using Vue with Webpack and PapaParse for efficient data parsing

I have encountered an issue while trying to implement PapaParse's worker option () with Vue's webpack template (https://github.com/vuejs-templates/webpack). The error message I'm receiving is: Uncaught ReferenceError: window is not #defi ...

Is there a way to verify if both the username and email have already been registered?

I've exhausted multiple methods attempting to solve this issue, but every attempt falls short. My most recent strategy involved creating two "findOne" functions, however, even that proved unsuccessful. const checkUser = registerLogin.findOne ...

Making AJAX calls without displaying any alerts or prompts

I'm utilizing the $.when().then(success, fail).always() pattern to manage 3 asynchronous ajax calls. Here is the code I am using: $.when( $.ajax({ url: NewsCategoryUrl, beforeSend: function () { //alert('NewsCate ...

Please consider opening in a new tab rather than a new window

<a href='#' onclick="loadpage();">[RANDOM PAGE]</a> Whenever this code is clicked, the following function gets executed. function loadpage(){ $.ajax ({ type: "POST", url: "fetchpage.php", data: "showpage=1", success: function(msg) { ...

The jQuery .animate function seems to be malfunctioning

I recently came across this jsfiddle link: http://jsfiddle.net/2mRMr/3/ However, the code provided is not functioning as expected: setInterval(function () { box.animate({ left: function (i, v) { return newv(v, 37, 39); }, ...

Can JavaScript be utilized to retrieve the MAC address?

Is it possible to retrieve the Mac addresses of a system for login using JavaScript? ...

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

My goal is to develop a sticky menu utilizing CSS Bootstrap affix and the list-group menu. I have successfully implemented most of it, except for one issue when the user scrolls down. Upon scrolling down, the menu expands to fill the entire width of the ...

Transferring ipywidgets to a web platform

I've developed a Python program in Jupyter Notebook that leverages the interact function from the ipywidgets module. interact(my_func, filter_by=filter_by_list, format_type=format_dict.keys()) I am looking for a way to share this interactive widget ...

eliminating the hues beneath the lines on Morris region charts

I'm seeking advice on how to remove colors below the lines in Morris area charts. Any ideas? Here's the code snippet I've been using: Morris.Area({ element: 'area-example', data: [ { y: '2006', a: 100, b: 90 }, ...

What are some strategies to enhance the performance of the following Mongoose query?

Essentially, I am trying to retrieve data from a collection where the pincode field (inside the Location array) matches the value from req.body. I am able to obtain the desired output, but I am unsure if this is the most optimized method or not (please see ...

Storing intricate items in a JavaScript database can be tricky. Using JSON.stringify() can sometimes lead to unexpected errors

In my project, I have a class called Player and a list of players named gameData. My goal is to save and retrieve this gameData from a database so that user information remains intact even after the bot restarts or crashes. However, when attempting to use ...

Challenges arise when attempting to pass array data from Ajax to Google Maps

I'm facing an issue with my Google map. I have a data array that is dynamically returned, and I want to use it to add markers to the map. However, the markers don't work when I pass the data variable to the add_markers() function. It only works i ...

Converting a numerical value starting with zero into a string while retaining the leading zero

I am facing an issue with my JavaScript code that retrieves GPS location from a browser. Due to the limitation of writing coordinates to an SQL database directly from JavaScript, I have resorted to sending it via PHP by utilizing the controller "site" and ...

Arranging Data in a Table using Tabs and JavaScript

I am seeking assistance with a table I created that has multiple tabs containing different data. Each tab displays different information within the table rows, including a column for the number of votes. I am looking to automatically sort the rows based on ...

Issue with adding a new value to an array within a specific key of an object

Imagine I have this function: const createMenu = () => { const obj = { consumption: [], }; return obj; }; It's a function that, when executed, returns the object { consumption: [] } My goal is to add a key inside that object which is a ...

XPath using JScript

I'm a beginner with Selenium and I'm curious about how the value in the text box is loaded when there's no value visible in the HTML tag: <input type="text" name="qty" id="qty" maxlength="5" value="" title="Qty" class="quantity-input qty ...

Is there a way to update a .json value using commands in Discord?

As a beginner in coding, I have successfully created a Discord bot using Node.js that has the ability to modify the entire config.json file, start and stop the bot, and create instances. However, I am currently facing a challenge where I need to update a s ...

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

Remove a child node from its parent node in real-time

Currently, I am working on a project that involves adding and removing items as needed. The user interface can be seen in the image provided below: https://i.sstatic.net/Qhy2t.png Workflow: When the add icon is clicked, a new column is added for assignme ...