Question 349938 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Change div content from select option or input field

How can I display text based on the selected option or text entered in the input field?

The default text that appears is "Aa Bb Cc Dd Ee…", if I select another text in the options, it will change.

And if I type in the input field, it will also change based on what was input.

If I select the text again in the select option, the text will also change according to what I selected, and delete the text in the input 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>
Tags:

3

Answers


  1. 0

    As I got right you need something similar to:

    //.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);    
});
    Login or Signup to reply.
  2. 0

    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 (well, could be anything) the fieldset will be enabled and the user can write something in the text input. You can hide the text input by setting a CSS selector for fieldset:disabled {display: none;}. The nice thing about disabled elements in a form is that they are not included in 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>
    Login or Signup to reply.
  3. 0

    Just using javascript manipulate html element.

    <select id="font-sample-option" onchange="selectChange(event)">
  <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" oninput="inputChange(event)" placeholder="Type here ..." maxlength="55" type="text">
<span class="font-sample-display">Aa Bb Cc Dd Ee...</span>
<script>
  const selectDom = document.querySelector('#font-sample-option')
  const inputDom = document.querySelector('#font-sample-input')
  const contentDom = document.querySelector('.font-sample-display')
  function selectChange(e) {
    const index = e.target.value
    const text = e.target[index - 1].innerText
    contentDom.innerText = text
    inputDom.value = ''
  }
  function inputChange(e) {
    const text = e.target.value
    contentDom.innerText = text
    selectDom.value = ''
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search