CODEWITHSUNDEEP
javascriptphpjquery
FRanklinDavid
FRanklinDavid

Reputation: 135

`Dynamically populate a dropdown menu using strings from a textarea

I want this coded in jquery preferably but normally, javascript is still fine by me.

The question is this: I have a textarea and a dropdown menu on thesame page. I can fill in text into the textarea by typing it or pasting it. The textarea on eachline contain emails and names seperated by comma.: Eg

[email protected], Richards Dough

[email protected]

[email protected] , Emily Whites

[email protected] , Junior

[email protected],

[email protected], Ademola Erickson

etc (notice the comma can be anywhere or even absent) I want the dropdown menu to automatically be filled with the values of domain names of emails found on the textarea. NOTE: There should NOT be duplicate listing in the dropdown and the listing should be alphabetically arranged in the dropdown In my example, the dropdown will be be populated as below:

ALL

abc.com

gmail.com

xyz.com

yahoo.com

yahoo.co.uk

Default selected dropdown item has a value of ALL. Please I know how to do this in php but have no clue about using javascript or jquery. Plus php have to refresh page to work but javascript wouldn't need page reloading

Upvotes: 0

Views: 195

Answers (2)

RRR
RRR

Reputation: 1084

Hi Kindly check https://jsfiddle.net/pykmgyyt/5/ ...

jQuery

    $(document).ready(function(){
    var arr= new Array();
  arr[0]="ALL"; //Setting fist element of the array to ALL

  $('.btnUpdate').on('click', function(){
  var newEmails=new Array();


  var newEmails=$('.taEmails').val().split(/[ ,\r\n]+/);  // get text area value and split text whenever jq encounters comma, space or newline and storing it into an array

  /* Travese through newEMails array and push string which contains '@' in to arr array */
  $.each(newEmails, function(i){
    if (newEmails[i].indexOf('@') > -1){
          arr.push(newEmails[i].substring(newEmails[i].indexOf("@") + 1)); /* Get only the domain names*/
        console.log(newEmails[i]);
    }

  });


  // check for duplicates
  var result = [];
  $.each(arr, function(i, e) {
    if ($.inArray(e, result) == -1) result.push(e);
  });
  arr= result;



        $('.ddEmails').empty(); // Empty dropdown
      arr.sort(); // sort array
      /*Append new array*/
   $.each(arr, function(i){
    $('.ddEmails').append("<option>"+arr[i]+"</option>");
    //console.log(arr[i]);
   }); /// arr each   
  }); //  click
});

Upvotes: 1

J.K
J.K

Reputation: 1374

-split by comma and newline

-loop through each splited string

  • check whether it has @ symbol

  • Find the domain and return

-display it in the select box

HTML

<textarea id="emails" onkeyup="finddomain();">
[email protected], Richards Dough    
[email protected]   
[email protected]   , Emily Whites    
[email protected] ,  Junior    
[email protected],    
[email protected], Ademola Erickson
</textarea>

<select id="add_domain" name="add_domain">


</select>

Javascript

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
function extractDomain(url) {   
    var ind=url.indexOf("@");
    if (ind > 0)
    {
    var domain = url.substr((ind+1));
    return domain;
    }
    else
    return '';
}

function finddomain()
{
// You can do the below parts on javascript event
data = document.getElementById('emails').value;
var arr = data.split(/[\n,]+/); //data.split('\n');
var arrayLength = arr.length;

var sel = document.getElementById("add_domain");

for (var i = 0; i < arrayLength; i++) {
    var domain = extractDomain(arr[i].trim());

    if (domain != '' && $("#add_domain option[value='"+domain+"']").length == 0)
    {
    var option  = document.createElement("option");
    option.text  = domain;
    option.value = domain;

    sel.appendChild(option);    
    }
}
}
</script>

Below part is to extract domains for multiple events

<script type="text/javascript">
$(document).ready(function() {
    $('#emails').on('keyup keypress blur change', function(e) {
        // e.type is the type of event fired
        finddomain();
    });
});
</script>

Upvotes: 0

Related Questions