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

【问题标题】：1st dropdown name selection displays email value in 2nd dropdown第一个下拉名称选择在第二个下拉列表中显示电子邮件值
【发布时间】：2017-06-15 20:45:45
【问题描述】：

我有 2 个下拉菜单。
下拉列表是动态填充的。
工作原理：如果选择 name1 (drop-down1)，则选择 email1 (drop-down2)。（js有效）。
什么不工作：选择name1后，如果我选择name4，则会显示email2。发生的事情是 drop-down2 按编号顺序进行，而不是按 drop-down1 顺序选择的内容。
应该发生什么：所选名称应显示与该名称对应的电子邮件。示例：name1 = email1、name2 = email2、name3 = email3、name4 = email4、name5 = email5，等等。

HTML

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

    }

    }

    }

【问题讨论】：

它并不是在选择任何东西，您每次选择名称时都会删除电子邮件，因此它只会选择下一个可用的电子邮件。你真正想要完成的是什么？
如果他们总是有相同的顺序，这是我能想到的最简单的解决方案：jsfiddle.net/gcafhmyp

标签： javascript jquery html drop-down-menu

【解决方案1】：

虽然您标记了一个 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);"之类的函数

【讨论】：

【解决方案2】：

试试

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

我认为应该可以。

【讨论】：