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

Posted 2023-02-24

【中文标题】第一个下拉名称选择在第二个下拉列表中显示电子邮件值

【英文标题】：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>

JS

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

【参考方案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;
        
    

我认为应该可以。