第一个下拉列表名称选择显示第二个下拉列表中的电子邮件值

我有2个下拉菜单。
下拉列表是动态填充的。
工作原理：如果选择name1（下拉列表1），则选择email1（下拉列表2）。（JS的作品）。
什么不起作用：选择name1后，如果我选择name4 email2显示。发生了什么是下拉式2按照编号顺序排列，而不是按下拉顺序1选择。
应该发生什么：所选名称应显示与该名称对应的电子邮件。例如：NAME1 = EMAIL1，NAME2 = EMAIL2，NAME3 = EMAIL3，NAME4 = EMAIL4，NAME5 = email5等

<select id="names" name="names" onchange="change(this.value);"> 
    <option value="0"></option> 
    <option value="name1">name1</option> 
    <option value="name2">name2</option> 
    <option value="name3">name3</option> 
    <option value="name4">name4</option> 
    <option value="name5">name5</option> 
    </select> 

    <select id="emails" name="emails" onchange="change(this.value);"> 
    <option value="0"></option> 
    <option value="email1">email1</option> 
    <option value="email2">email2</option> 
    <option value="email3">email3</option> 
    <option value="email4">email4</option> 
    <option value="email5">email5</option> 
    </select>

function change(value) { 

    var names = document.getElementById('names'); 

    var emails = document.getElementById('emails'); 


    for (i = 0; i < names.length; i++) { 

     if (names.options[i].value == '0') { 

     emails.remove(i); 

    } 

    } 

    }

来源

2017-06-15 Jad

这并不是说它正在选择任何东西，而是每次选择一个名称时删除电子邮件，因此它只是选择下一个可用电子邮件。你究竟在努力完成什么？ –

如果他们总是有相同的顺序，这是我可以想出的最简单的解决方案：https：//jsfiddle.net/gcafhmyp/ –

虽然你标记了一个jQuery这是一个jQuery解决方案

function change(el , value) { 
 
    var names = $('.select'), 
 
     selected_index = $(el).find('option:selected').index(); 
 
    $('.select').not($(el)).find('option:eq('+selected_index+')').prop('selected',true); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="select" id="names" name="names" onchange="change(this , this.value);"> 
 
    <option value="0"></option> 
 
    <option value="name1">name1</option> 
 
    <option value="name2">name2</option> 
 
    <option value="name3">name3</option> 
 
    <option value="name4">name4</option> 
 
    <option value="name5">name5</option> 
 
    </select> 
 

 
    <select class="select" id="emails" name="emails" onchange="change(this , this.value);"> 
 
    <option value="0"></option> 
 
    <option value="email1">email1</option> 
 
    <option value="email2">email2</option> 
 
    <option value="email3">email3</option> 
 
    <option value="email4">email4</option> 
 
    <option value="email5">email5</option> 
 
    </select>

步骤：

1 - 不要忘了包括jQuery的

2 - 既提供您<select>的一类class="select"

3-你的函数会change(el , value)

4 - 使用像onchange="change(this , this.value);"

来源

2017-06-15 20:58:21

功能尝试

function change(value){ 
    var emails = document.getElementById('emails'); 
    var emailValue = value.replace("name", "email"); 
    for(var i = 0; i < emails.length; i++){ 
     if(emails.options[i].value == emailValue){ 
      emails.options[i].selected = true; 
     } 
     else { 
      emails.options[i].selected = false; 
     } 
    } 
}

我认为应该工作。

来源

2017-06-15 21:08:14

第一个下拉列表名称选择显示第二个下拉列表中的电子邮件值

回答

相关问题