Question

我想在jquery中优先编码，但通常情况下，javascript对我来说仍然没问题。

问题是：我在同一页面上有一个textarea和一个下拉菜单。我可以通过键入或粘贴文本填写文本到textarea。每行上的textarea包含以逗号分隔的电子邮件和名称：例如

email1@xyz.com，理查兹面团

email2@abc.com
      EmilY34@yahoo.com,Emily Whites

Juniorpope4u@gmail.com，Junior

Mike87@yahoo.co.uk，

Ademola45thus@gmail.com，Ademola Erickson

等（请注意逗号可以在任何地方，甚至可以不存在）我希望下拉菜单自动填充textarea上找到的电子邮件域名的值。注意：下拉列表中不应有重复的列表，列表应按字母顺序排列在下拉列表中在我的示例中，下拉列表将填充如下：


所有的的

abc.com

gmail.com

xyz.com

yahoo.com

yahoo.co.uk

默认选定的下拉项目的值为所有。请知道如何在PHP中执行此操作，但不知道如何使用javascript或jquery。加上php必须刷新页面才能工作，但javascript不需要重新加载页面

Answer 1

嗨请检查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
});

Answer 2

-split by逗号和换行符

-loop through each splited string

检查是否有@符号
找到域名并返回

- 在选择框中显示

<强> HTML

<textarea id="emails" onkeyup="finddomain();">
email1@xyz.com, Richards Dough    
email2@abc.com   
EmilY34@yahoo.com   , Emily Whites    
Juniorpope4u@gmail.com ,  Junior    
Mike87@yahoo.co.uk,    
Ademola45thus@gmail.com, 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>

以下部分是为多个事件提取域名

<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>

`使用textarea

2 个答案: