jQuery loop through all h3 and selects on page and format output in textarea-CodePudding

So I have a basic structure of a page and my corresponding script:

jQuery('select').change(function() {
  var abc = jQuery("select option:selected").text();
  var def = jQuery("h3").text();
  jQuery('textarea[name="ghi"]', $form).val(def   "\n\n"   abc).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h3>Title</h3>
<select>
  <option value="A">This is Option a</option>
</select>

<h3>Title</h3>
<select>
  <option value="B">This is Option b</option>
</select>

This outputs each as

Title Title This is Option a This is Option b

Which I understand - but how do I get the textarea to output as

Title This is Option a
Title This is Option b

Is that even possible?

CodePudding user response：

After adding textarea to your HTML and removing change event on select because it makes no sense this is working solution. You can use it for as many selects and H3s that you want.

let abc = [];
let def = [];
$("select option:selected").each(function(el) {
  abc.push($(this).text())
});
$("h3").each(function(el) {
  def.push($(this).text())
});
for(let i = 0; i < abc.length; i  ) {
  let text = $('textarea[name="ghi"]').val();
  $('textarea[name="ghi"]').val(text   def[i]   ' '   abc[i]   '\n').change();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Title</h3>
<select><option value="A">This is Option a</option></select>

<h3>Title</h3>
<select><option value="B">This is Option b</option></select>
<textarea name='ghi'></textarea>

And now this is solution with change event on select. But for this solution you will have to add at least one more option to both selects:

$('select').change(function() {
  $('textarea[name="ghi"]').val('').change(); //setting text area to ''
  let abc = [];
  let def = [];
  $("select option:selected").each(function(el) {
    abc.push($(this).text())
  });
  $("h3").each(function(el) {
    def.push($(this).text())
  });
  for(let i = 0; i < abc.length; i  ) {
    let text = $('textarea[name="ghi"]').val();
    $('textarea[name="ghi"]').val(text   def[i]   ' '   abc[i]   '\n').change();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Title</h3>
<select>
  <option value="A">This is Option a</option>
  <option value="B">This is Option b</option>
</select>

<h3>Title</h3>
<select>
  <option value="A">This is Option a</option>
  <option value="B">This is Option b</option>

</select>
<textarea name='ghi'></textarea>

CodePudding user response：

vi, Here is how I solved your question, First, I have gotten all H3 and Selected options then I added each H3(s) as a title

Title This is option A Title This is option B

here is my sample code

    $( document ).ready(function() {
    console.log( "ready!" );

    var h3s = $('h3').each(function(value) {
        value   "\n";
    });

    var options = $('select option:selected').each(function(value) {
        value   "\n";
    });

    var output = "";
    $(h3s).each(function(i, value) {
        console.log("Index: "   i   " value: "   value.innerText   "\n"   options[i].innerText);
        output  = value.innerText   "\n"   options[i].innerText   "\n";
    });

    $('body').append($('<textarea>', {
        name: 'ghi'
    }).val(output));

});

Please let me know if I have solved your question.

CodePudding user response：

Changes had to be made to the HTML as well as the JavaScript:

Added <option default> to each <select> because having a select with only one option is pointless.
Gave each <option value='Title'> which makes it easier to extract data from a single element like <option value='val'>text</option>

There were a few problems in OP code:

jQuery("h3").text() will print both h3. So in the example there is specific jQuery methods used to pinpoint what is being accessed:

// <option value="VALUE">...</option>
$('select').first().find(':selected').val()

// <option value="">TEXT</option>
$('select').first().find(':selected').text()

Rendering to <textarea> with text or setting the .value property doesn't have a way of inserting linebreaks (that I know of least -- go ahead and comment if the contrary). Rendering HTML to a <textarea> actually allows us to add '
' for a linebreak.
```
 $('textarea').html(A   B)
```

$('select').on('change', function(e) {
  var A = $('select').first().find(':selected').val()   ' '   $('select').first().find(':selected').text()   '&#10;';

  var B = $('select').last().find(':selected').val()   ' '   $('select').last().find(':selected').text()

  $('textarea').html(A   B)
});

body {
  display: flex;
  justify-content: center
}

h3 {
  margin: 3px 0
}

h3:first-of-type {
  margin-top: -3px
}

<fieldset>
  <h3>Title</h3>
  <select>
    <option default></option>
    <option value='Title'> This is Option a</option>
  </select>

  <h3>Title</h3>
  <select>
    <option default></option>
    <option value='Title'> This is Option b</option>
  </select>
</fieldset>

<textarea></textarea>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>