Question

我有2个下拉菜单。
下拉列表是动态填充的。
什么有效：如果选择了name1（下拉列表1），则选择email1（下拉2）。（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);

    }

    }

    }

Answer 1

当你标记一个jquery时，这是一个jquery解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

<强>步骤：

1-不要忘记包含jquery

2-同时给出<select>一个班级class="select"

3-您的功能将是change(el , value)

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

这样的功能

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

我认为这应该有用。

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

2 个答案: