Ways to show the existing value of a <select> in a label without altering the function

Question

Ways to show the existing value of a <select> in a label without altering the function

I currently have a label that changes to display the selected option from a dynamic select dropdown, but it only updates when the selection is changed. I would like it to also display the current value when the page first loads. I attempted to change 'change' to 'load' without success. Here is my current setup:

Array.prototype.forEach.call(document.getElementsByName('filename'), function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById('mylabel').innerHTML = this.value;
  });
});

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

javascript jquery html css select

Answer 1

Answer №1

When the webpage is loaded, all you have to do is...

<body onload="mytext.innerHTML=filetitle.value;">

Answer 2

When the webpage is loaded, all you have to do is...

<body onload="mytext.innerHTML=filetitle.value;">

Answer 3

Answer №2

I have made the necessary adjustments, including placing the line outside the function.

Array.prototype.forEach.call(document.getElementsByName('filename'), function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById('mylabel').innerHTML = this.value;
  });
});
document.getElementById('mylabel').innerHTML = document.getElementById('filename').value;

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 4

I have made the necessary adjustments, including placing the line outside the function.

Array.prototype.forEach.call(document.getElementsByName('filename'), function(elem) {
  elem.addEventListener('change', function() {
    document.getElementById('mylabel').innerHTML = this.value;
  });
});
document.getElementById('mylabel').innerHTML = document.getElementById('filename').value;

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 5

Answer №3

Utilizing the Array prototype forEach method, we can loop through elements with the name 'filename' and add an event listener for when they change. Once the change event occurs, the value of the element will be displayed in the 'mylabel' element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 6

Utilizing the Array prototype forEach method, we can loop through elements with the name 'filename' and add an event listener for when they change. Once the change event occurs, the value of the element will be displayed in the 'mylabel' element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 7

Answer №4

What is the purpose of the loop?

let element = document.getElementById("filename");
let label = document.getElementById('mylabel');

document.addEventListener('DOMContentLoaded',function(){
   label.innerHTML = element.value;    
   element.addEventListener('change', function(){
      label.innerHTML = this.value;
   });
});

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 8

What is the purpose of the loop?

let element = document.getElementById("filename");
let label = document.getElementById('mylabel');

document.addEventListener('DOMContentLoaded',function(){
   label.innerHTML = element.value;    
   element.addEventListener('change', function(){
      label.innerHTML = this.value;
   });
});

<select class="select1" name="filename" id="filename">
  <option>foo</option>
  <option>bar</option>
</select>
<label id="mylabel"></label>

Answer 9

Answer №5

To practice the DRY principle (Don't Repeat Yourself), assign a name to the click handler and then trigger it manually upon initialization. Alternatively, you can manually trigger the change event during initialization.

Sample Code:

$(function() {
  // Assign event handler for change
  $('#filename').change(mylabel_update);

  // Update mylabel to display filename
  function mylabel_update() {
    $('#mylabel').html($('#filename').value);
  } 

  // Initialization option A - Directly call the function
  mylabel_update();

  // Initialization option B - Force the change event (no need for a named function)
  $('#filename').trigger('change');
});

Answer 10

To practice the DRY principle (Don't Repeat Yourself), assign a name to the click handler and then trigger it manually upon initialization. Alternatively, you can manually trigger the change event during initialization.

Sample Code:

$(function() {
  // Assign event handler for change
  $('#filename').change(mylabel_update);

  // Update mylabel to display filename
  function mylabel_update() {
    $('#mylabel').html($('#filename').value);
  } 

  // Initialization option A - Directly call the function
  mylabel_update();

  // Initialization option B - Force the change event (no need for a named function)
  $('#filename').trigger('change');
});

Ways to show the existing value of a <select> in a label without altering the function

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Debugging in Javascript involves pausing or breaking at every instance of a javascript function being called

Modify the properties of a particular component

One of the two identical pages is experiencing issues with the jQuery leanmodal while the other is

Creating a row in your HTML frontend with automated three-column cards

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

Is there a way to call class methods from external code?

What is the best way to expand the subcategories within a list?

The drop-down menu remains visible even after clicking outside of it

When new text is added to Div, the first line is not displayed

Is it possible to modify or delete the question mark in a URL?

Utilizing the MEAN stack to establish a connection with a simulated data collection

Error TS2307: Module 'calculator' could not be located

Display successive slidedown notifications consecutively

Tips for integrating bootstrap code within PHP tags

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

How can I dynamically assign @ViewChild('anchor_name') to a newly updated anchor element in Angular 2+?

`Shifting a spherical object from point A to point B along its axis`

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

What method is most effective for comparing two HTML pages that contain identical content but varied markup?