javascript - the dropdown text remains static

Two dropdown fields are present: DropDownA and DropDownB, along with a checkbox.

When the checkbox is checked, DropDownA will mirror the text, value, and selected index of DropDownB before becoming disabled.

The issue at hand:

Although the attributes can be changed successfully, there seems to be an issue with refreshing DropDownA on the screen. Even though the text attribute changes as indicated by an alert message, the visible text remains unchanged.

var x=document.getElementById("nazione_pr").selectedIndex;
        var y=document.getElementById("nazione_pr").options;
        var w=document.getElementById("nazione_spedizione").selectedIndex;
        var z=document.getElementById("nazione_spedizione").options;
        alert (y[x].text);
        alert (z[w].text);
        //w=x;
        document.getElementById("nazione_spedizione").selectedIndex = document.getElementById("nazione_pr").selectedIndex;
        z[w].text=y[x].text;
        alert (z[w].text);
        document.getElementById("nazione_spedizione").disabled=true;
        $("nazione_spedizione").trigger("liszt:updated");

There seems to be a need for some sort of method to reload the select UI element.

javascriptdropdownbox

Answer №1

I think this solution might be of assistance to you.

JS FIDDLE

<select id="dropdownA">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
</select>
<select id="dropdownB">
       <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
</select>
<input type="checkbox" id="checkbox1" name="chk" value="check">check

$(document).ready(function() {

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
          var selectedtext=$('#dropdownA>option:selected').text();
             var selectedvalue=$('#dropdownA>option:selected').val();
             var index=$('#dropdownA>option:selected').index();

            $('#dropdownB').val(selectedvalue);
            $('#dropdownB').selectedIndex=index;

        }

    });
});

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

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

In a unique scenario, I've encountered an issue where an anchor triggers the 'click' event before the input field, causing it to lose focus and fire the 'focusout' event. Specifically, when writing something in the input field and ...

javascripthtml

Issue with passing parameter in Jquery AJAX request to controller function

Currently, I am integrating a Jquery AJAX Call into my MVC Application. Here is an overview of how my view is structured: <p> Name @Html.TextBox("Name") Date @Html.TextBox("Date") <input type="submit" id="SubmitName" value="Submit" /& ...

javascriptjqueryajaxpostasp.net-mvc-ajax

ES6: utilizing properties and methods of a subclass that inherit from the superclass

While ES6 does not have abstract methods or properties, is it possible to access some methods or properties from the parent class in an inherited class? class ParentClass { constructor(){ ParentClass.checkChildPropertyAccessibility(); Pa ...

javascriptecmascript-6

The e.currentTarget attribute in Material UI buttons is a key element that

I am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...

javascripthtmlreactjsreduxmaterial-ui

This piece of code is causing my browser to lag

I am encountering an issue with fetching and adding values from a weather API to my HTML elements. My goal is to display the hourly forecast for today, starting from the current hour until midnight of the next day. In order to optimize space, I implemente ...

javascripthtmlapiloopsbrowser

Having difficulty accessing and updating data in a database while using Discord.js

My goal is to enable staff to respond to the last direct message (DM) by using ~reply <message> instead of ~dm <userID> <message>. However, before I can do that, I need to store the user's ID in a database to identify the last person ...

javascriptnode.jsdiscord.js

Switch between selection modes in React JS DataGrid using Material UI with the click of a button

I've been working on creating a datagrid that includes a switch button to toggle between simple and multiple selection modes. const dispatch = useDispatch(); const { selectedTransaction } = useSelector(...) const [enableMultipleSelection, setEnableMu ...

javascriptreactjsdatagridmaterial-ui

Exploring alternatives to setTimeOut() for precise timing of Javascript events, especially when incorporating third party events

Here is the HTML element stack that I am working with: <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m">Model </label> ...

javascriptsettimeout

Leverage multiple services within a single AngularJS controller

Is it possible to use multiple services in the same controller? Currently, I am able to achieve this with different services, but it seems to only perform one service. <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs ...

javascriptjqueryhtmlangularjs

Utilize the fetch function to showcase information retrieved from a specific endpoint on a webpage using Javascript

Hey there, I have a Node server with an http://localhost:3000/community endpoint. When I make a GET request to this endpoint, it returns information about three different users in the form of JSON objects. [ { "avatar": "http://localhost:3000/avatars ...

javascripthtmldomfetch

How to Enhance Angular ui-router nested views with Resolve?

I have been working on creating a customized version of my Angular 1.4.12 application with nested views. The main purpose behind this customization is to accommodate sections within the app that require a header/content/footer structure, while others do no ...

javascripthtmlangularjsangular-ui-router

Creating HighStock charts on the server-side using NodeJS

I'm currently utilizing HighStock to create charts within the browser. However, I now have a need to save some of these charts on the server. While I understand that HighCharts offers an export option to the server, I am interested in exploring other ...

javascriptnode.jschartshighchartsjsdom

Echo input and refresh on the current page upon submission

I am facing an issue with refreshing the page after submitting a form. I want to refresh the page so that the login attempt can be counted, but currently, the form is displayed without the page being refreshed to add to the count. This is my current code s ...

javascriptphpforms

Trouble detecting click event in jQuery after triggering radio button in HTML

Encountering a peculiar jQuery issue where triggering a click on a radio button does not fire completely and is ignored by an on click function, while a similar call to the jQuery trigger method is successfully captured. In the below jQuery snippet, a < ...

javascriptjqueryonclickradio-buttoneventtrigger

Can a single controller function in ASP.NET MVC4 be used to send back two arrays to the view?

Continuing from my previous query here, I am working with a model called SchoolTestsPerModulePerStudent which looks like this: public partial class SchoolTestsPerModulePerStudent { public long StudentID { get; set; } public long ModuleID { get; se ...

javascriptasp.netarraysjsonasp.net-mvc-4

Incorporating an NPM JavaScript library into Laravel version 8

I've integrated the mobiscroll javascript component library into my new Laravel 8 app by adding the minified css/js files to the public/css and public/js directories. However, I'd like to find a more seamless way to include these components by us ...

javascriptlaravelnpmlaravel-8

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

I am looking to utilize jQuery datatables for filtering a column that may contain multiple values within a single td. To achieve this, I referenced the example provided in the datatables documentation. In the image below, my goal is to filter the office ...

javascriptjquerydatatables

Error: The function subscribe in _store_js__WEBPACK_IMPORTED_MODULE_12__.default is not supported

In my main App component, I am subscribing to the store in a normal manner: class App extends Component { constructor(props) { super(props) this.state = {} this.unsubscribe = store.subscribe(() => { console.log(store.getState()); ...

javascriptreactjsnpmreact-reduxredux-saga

JavaScript Regular Expression Assistance Domain Snatcher

I am in the process of developing a JavaScript Regex and I am struggling to find the right pattern to match a specific domain. Let me provide an example for better understanding. I need a regex that can identify any domain that exclusively contains (text. ...

javascriptregex

In case the desired property is not detected in the object, opt for an alternative property

Here is an example object: Object -> Content: <h1>some html</h1> Url : A url In the code below, I am checking if a specific URL exists in the given object: var checkURLInArray = function(url, array) { for(var i in array) { ...

javascriptjqueryobject