Update the content within a div based on the selected option from a dropdown menu or

Question

Update the content within a div based on the selected option from a dropdown menu or

Is there a way to change the displayed text based on user input or selected option?

By default, the text shown is "Aa Bb Cc Dd Ee...", but it can be changed by selecting different options.

If text is typed into the input field, the displayed text will update to reflect what was entered.

Selecting another option will also change the displayed text accordingly and clear any input in the field.

<select id="font-sample-option">
  <option value="1" selected="selected">Aa Bb Cc Dd Ee...</option>
  <option value="2">The quick brown fox...</option>
  <option value="3">When zombies arrive...</option>
</select>

<span>Or</span>

<input id="font-sample-input" placeholder="Type here ..." maxlength="55" type="text">

// Display selected text from the select option or input field
<span class="font-sample-display">Aa Bb Cc Dd Ee...</span>

javascript html jquery

Answer 1

Answer №1

Utilize JavaScript to dynamically change HTML elements.

<select id="font-sample-option" onchange="selectChange(event)">
  <option value="1" selected="selected">Apple Banana Cherry Date Elderberry...</option>
  <option value="2">The quick brown fox jumps over the lazy dog.</option>
  <option value="3">When zombies arrive, quickly fax judge Pat.</option>
</select>
<span>Or</span>
<input id="font-sample-input" oninput="inputChange(event)" placeholder="Type here ..." maxlength="55" type="text">
<br /><br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span> <br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span> <br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span>
<script>
  const selectDom = document.querySelector('#font-sample-option')
  const inputDom = document.querySelector('#font-sample-input')
  const contentDom = document.querySelectorAll('.font-sample-display')
  function selectChange(e) {
    const index = e.target.value
    const text = e.target[index - 1].innerText
    updateContent(text)
    inputDom.value = ''
  }
  function inputChange(e) {
    const text = e.target.value
    updateContent(text)
    selectDom.value = ''
  }
  function updateContent(text) {
    contentDom.forEach(dom => {
      dom.innerText = text
    })
  }
</script>

Answer 2

Utilize JavaScript to dynamically change HTML elements.

<select id="font-sample-option" onchange="selectChange(event)">
  <option value="1" selected="selected">Apple Banana Cherry Date Elderberry...</option>
  <option value="2">The quick brown fox jumps over the lazy dog.</option>
  <option value="3">When zombies arrive, quickly fax judge Pat.</option>
</select>
<span>Or</span>
<input id="font-sample-input" oninput="inputChange(event)" placeholder="Type here ..." maxlength="55" type="text">
<br /><br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span> <br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span> <br />
<span class="font-sample-display">Apple Banana Cherry Date Elderberry...</span>
<script>
  const selectDom = document.querySelector('#font-sample-option')
  const inputDom = document.querySelector('#font-sample-input')
  const contentDom = document.querySelectorAll('.font-sample-display')
  function selectChange(e) {
    const index = e.target.value
    const text = e.target[index - 1].innerText
    updateContent(text)
    inputDom.value = ''
  }
  function inputChange(e) {
    const text = e.target.value
    updateContent(text)
    selectDom.value = ''
  }
  function updateContent(text) {
    contentDom.forEach(dom => {
      dom.innerText = text
    })
  }
</script>

Answer 3

Answer №2

It seems like you're looking for something along the lines of:

//.html

<select id="font-sample-option">
      <option value="Aa Bb Cc Dd Ee..." selected="selected">Aa Bb Cc Dd Ee...</option>
      <option value="The quick brown fox...">The quick brown fox...</option>
      <option value="When zombies arrive...">When zombies arrive...</option>
</select>

<span>Or</span>

<input id="font-sample-input" placeholder="Type here ..." maxlength="55" type="text">
   
<span id="font-sample-display">Aa Bb Cc Dd Ee...</span>

//.js

window.addEventListener('load', () => {
  const selectEl = document.getElementById('font-sample-option');
  const inputEl = document.getElementById('font-sample-input');
  const spanEl = document.getElementById('font-sample-display');    
  selectEl.addEventListener('change', () => spanEl.innerHTML = selectEl.value);
  inputEl.addEventListener('keyup', () => spanEl.innerHTML = inputEl.value);    
});

Answer 4

It seems like you're looking for something along the lines of:

//.html

<select id="font-sample-option">
      <option value="Aa Bb Cc Dd Ee..." selected="selected">Aa Bb Cc Dd Ee...</option>
      <option value="The quick brown fox...">The quick brown fox...</option>
      <option value="When zombies arrive...">When zombies arrive...</option>
</select>

<span>Or</span>

<input id="font-sample-input" placeholder="Type here ..." maxlength="55" type="text">
   
<span id="font-sample-display">Aa Bb Cc Dd Ee...</span>

//.js

window.addEventListener('load', () => {
  const selectEl = document.getElementById('font-sample-option');
  const inputEl = document.getElementById('font-sample-input');
  const spanEl = document.getElementById('font-sample-display');    
  selectEl.addEventListener('change', () => spanEl.innerHTML = selectEl.value);
  inputEl.addEventListener('keyup', () => spanEl.innerHTML = inputEl.value);    
});

Answer 5

Answer №3

To detect changes in the select element and text input element, you can listen for the change event on the select element and the input event on the text input element.

If the value of the select element is 4 (or any other value), the fieldset will become enabled, allowing the user to enter text into the text input field. You can hide the text input field using a CSS selector like

fieldset:disabled {display: none;}

. One advantage of disabled elements within a form is that they are not considered during the submit event.

document.forms.form01.font_sample_option.addEventListener('change', e => {
  let form = e.target.form;
  form.custom_fieldset.disabled = true;
  if(e.target.value == 4){
    form.custom_fieldset.disabled = false;
    form.selected_text.value = form.font_sample_input.value;
  }else{
    form.selected_text.value = e.target.selectedOptions[0].label;
  }
});

document.forms.form01.font_sample_input.addEventListener('input', e => {
  let form = e.target.form;
  form.selected_text.value = form.font_sample_input.value;
});

<form name="form01">
  <select name="font_sample_option">
    <option selected disabled>Select an option</option>
    <option value="1">Aa Bb Cc Dd Ee...</option>
    <option value="2">The quick brown fox...</option>
    <option value="3">When zombies arrive...</option>
    <option value="4">Custom text</option>
  </select>
  <fieldset name="custom_fieldset" disabled>
    <span>Or</span>
    <input name="font_sample_input" placeholder="Type here ..." maxlength="55" type="text">
  </fieldset>
  <span class="font-sample-display"><output name="selected_text"></output></span>
</form>

Answer 6

To detect changes in the select element and text input element, you can listen for the change event on the select element and the input event on the text input element.

If the value of the select element is 4 (or any other value), the fieldset will become enabled, allowing the user to enter text into the text input field. You can hide the text input field using a CSS selector like

fieldset:disabled {display: none;}

. One advantage of disabled elements within a form is that they are not considered during the submit event.

document.forms.form01.font_sample_option.addEventListener('change', e => {
  let form = e.target.form;
  form.custom_fieldset.disabled = true;
  if(e.target.value == 4){
    form.custom_fieldset.disabled = false;
    form.selected_text.value = form.font_sample_input.value;
  }else{
    form.selected_text.value = e.target.selectedOptions[0].label;
  }
});

document.forms.form01.font_sample_input.addEventListener('input', e => {
  let form = e.target.form;
  form.selected_text.value = form.font_sample_input.value;
});

<form name="form01">
  <select name="font_sample_option">
    <option selected disabled>Select an option</option>
    <option value="1">Aa Bb Cc Dd Ee...</option>
    <option value="2">The quick brown fox...</option>
    <option value="3">When zombies arrive...</option>
    <option value="4">Custom text</option>
  </select>
  <fieldset name="custom_fieldset" disabled>
    <span>Or</span>
    <input name="font_sample_input" placeholder="Type here ..." maxlength="55" type="text">
  </fieldset>
  <span class="font-sample-display"><output name="selected_text"></output></span>
</form>

Update the content within a div based on the selected option from a dropdown menu or

Answer №1

Answer №2

Answer №3

Similar questions

What are the potential ways in which an html IMG tag can disrupt the functionality of this

Connecting the v-model in a Vue.js child component to update the parent value

Tips for enhancing the fluidity of animations after removing an item from a list

Locating a Guild Member using their Alias

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

Have you considered retrieving POST parameters using Ajax POST in jQuery?

Make sure to always display the browser scrollbar in order to avoid any sudden page

Having trouble with data retrieval from MySQL using PHP and Angular on certain mobile devices, although it functions properly on desktops and laptops

Need help fixing my issue with the try-catch functionality in my calculator program

The lightbox is triggered by clicking on a different div to display its content

Converting a Class Component to a Functional Component: Step-by-Step Guide

Embed a service within an Angular 1.5 component

Implementing jQuery form validator post anti-SPAM verification?

Display markers on the canvas

Integrating dynamic PHP echo strings from a database into an established CSS layout

When the jQuery document is ready, it typically returns null, but the console can still access and display

Detailed enrollment procedure

Setting line height as a pixel value does not yield the desired result

Tips for accessing and modifying local JSON data in a Chrome Extension

What could be causing the absence of the ID definition?