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

Jquery – Covert ajax output into option

I am getting html after ajax call and I want to change the output into option. I have select tags where I want to append these options

<div class="views-element-container">
  <div class="view view-contact-view-id-contact view-display-id-page_2 js-view-dom-id">      
     <div class="view-content">
        1009abc example    1008xyz example 12564abc cdfg &amp; TOT arrangement
     </div>  
  </div>
</div>

now I want output:

<option value="1009">abc example </option>
<option value="1008">xyz example </option>
<option value="12564">abc cdfg &amp; TOT arrangement</option>
Tags:

2

Answers


  1. 0

    You can use a fragment and a regexp

    const str = `<div class="views-element-container"><div class="view view-contact-view-id-contact view-display-id-page_2 js-view-dom-id">      
  <div class="view-content">
      1009abc example    1008xyz example
 </div>  
 </div>
</div>`

const sel = document.querySelector("select");
const fragment = document.createElement("div");
fragment.innerHTML = str;

const re =  /(d+)(w+)s+(w+)/g;

let text = fragment.querySelector(".view-content").textContent.trim();

const matches = [...text.matchAll(re)];  // Convert matchAll iterator to Array

const optionsHTML = matches.map(match => {
  const [_, id, name, value] = match;
  const displayText = `${name} ${value}`;
  return `<option value="${id}">${displayText}</option>`;
}).join("");

sel.innerHTML += optionsHTML;
    <select>
<option value="">Please select</option>
</select>
    Login or Signup to reply.
  2. 0

    Using jQuery you can achieve it like this:

    a) Get the desired div content first.

    b) Match this content with the appropriate regular expression so that it will give you an array of strings.

    c) Apply loop over this array of string values

    d) Again math the values with an appropriate regular expression so that you will get an array of digits and the rest of the string.

    e) Use this digit value as the select option value and string as the select option text.

    Working sample:

    var content = `<div class="views-element-container">
  <div class="view view-contact-view-id-contact view-display-id-page_2 js-view-dom-id">      
     <div class="view-content">
        1009abc example    1008xyz example    1007def example    1006ghi example
     </div>  
  </div>
</div>`;

var desiredText = $.trim($(content).find('.view-content').text()); //step a
var arr = desiredText.match(/(d+)(w+)s+(w+)/g); // step b
$.each(arr, function(index, value) { // step c
  var array = value.match(/D+|d+/g); //step d
  $('select').append('<option value="' + array[0] + '">' + array[1] + '</option>'); //step e
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select></select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search